JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <video id="video" preload=auto 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

var video = $("#video")[0];
var vw;
var vh;
var canvas = $('#canvas')[0];
var context = canvas.getContext("2d");

video.addEventListener("loadedmetadata", function() {
    vw = this.videoWidth || this.width;
    vh = this.videoHeight || this.height;
    canvas.width = vw
    canvas.height = vh;
}, false);

video.addEventListener("play", draw, false);

function draw() {
    if (video.paused || video.ended) {
        return false;
    }

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