JSFiddle - React, Tailwind, and code Playground

by Abhijeet Kandalkar

HTML

<html lang="en">
    <head>
        <link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
    </head>
    <body>
	<video id="vid" width="400" controls></video>
	<script src="js/base-video.js"></script>
    </body>
</html>

JavaScript

(function () {
	
	var dataURLToBlob = function(dataURL) {
		var BASE64_MARKER = ';base64,';
		if (dataURL.indexOf(BASE64_MARKER) == -1) {
			var parts = dataURL.split(',');
			var contentType = parts[0].split(':')[1];
			var raw = decodeURIComponent(parts[1]);

			return new Blob([raw], {type: contentType});
		}

		var parts = dataURL.split(BASE64_MARKER);
		var contentType = parts[0].split(':')[1];
		var raw = window.atob(parts[1]);
		var rawLength = raw.length;

		var uInt8Array = new Uint8Array(rawLength);

		for (var i = 0; i < rawLength; ++i) {
			uInt8Array[i] = raw.charCodeAt(i);
		}

		return new Blob([uInt8Array], {type: contentType});
	}
  
    // Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob
    var video_Storage1 = localStorage.getItem("video_Storage12"),
        video = document.getElementById("vid");
		
    if (video_Storage1) {
		var blob = dataURLToBlob(video_Storage1);
		video.src = URL.createObjectURL(blob);
		console.log("Playing video from local storage");
    }
    else {
        // Create XHR, BlobBuilder and FileReader objects
        var xhr = new XMLHttpRequest();
        var blob = null;
		var fileReader = new FileReader();
        xhr.open("GET", "mov_bbb.mp4", true);
        // Set the responseType to arraybuffer. "blob" is an option too, rendering BlobBuilder unnecessary, but the support for "blob" is not widespread enough yet
        xhr.responseType = "arraybuffer";

        xhr.addEventListener("load", function () {
			if (xhr.status === 200) {
                // Create a blob from the response
                blob = new Blob([xhr.response], {type: "video/mp4"});

                // onload needed since Google Chrome doesn't support addEventListener for FileReader
                fileReader.onload = function (evt) {
                    // Read out file contents as a Data URL
                    var result = evt.target.result;
                    // Set image src to Data URL
                   ...