JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <video id="video" autoplay controls>
    	<source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_surround-fix.avi" />
        <source src="http://mirrorblender.top-ix.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_h264.mov" />
        <source src="http://mirrorblender.top-ix.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg" />
        <source src="http://mirrorblender.top-ix.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.avi" />
    </video>
    <canvas id="canvas">
    	Please update your browser.
    </canvas>
</body>

CSS

*{margin:0; padding:0;}
body{font-family:Verdana,Tahoma, Arial, sans-serif; font-size:12px;}
#video, #canvas {clear:both;}
#canvas {background-color:rgba(51,153,255,0.5);}

JavaScript

$(function () {
		var video = $("#video");
		video.bind("loadedmetadata", function () {
			var vw = this.videoWidth;
			var vh = this.videoHeight;
			var canvas = $('#canvas');
			canvas.width(vw).height(vh);
			var context = canvas.getContext("2d");
			
			video.addEventListener("play", function () { draw(video, context, vw, vh); }, false);
		});
	});
	function draw(video, context, vw, vh)
	{
		if (video.paused || video.ended)
		{              
			return false;
		}

		context.drawImage(video, 0, 0, vw, vh);
		setTimeout(draw, 20, video, context, vw, vh);
	}