JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<canvas id='mycanvas'></canvas>
<video id='video1' controls='controls' width='320'>
	<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
	<source src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
	<source 
		src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" /></video>

CSS

#mycanvas {
    position: absolute;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 75%;
    height: 75%;
    
}

#video1 {
    position: absolute;
    left: 0;

}

JavaScript

document.addEventListener('DOMContentLoaded', function(){
    var v = document.getElementById('video1');
    var canvas = document.getElementById('mycanvas');
    var context = canvas.getContext('2d');

    var cw = 640;
    var ch = 480;
    canvas.width = cw;
    canvas.height = ch;

    v.addEventListener('play', function(){
        draw(this,context,cw,ch);
    },false);

},false);

function draw(v,c,w,h) {
    if(v.paused || v.ended) return false;
    c.drawImage(v,0,0,w,h);
    setTimeout(draw,20,v,c,w,h);
}