JSFiddle - React, Tailwind, and code Playground

JavaScript

var width = 640,
    height = 360;

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;

var video = document.createElement('video');
document.body.appendChild(video);

video.width = width;
video.height = height;
video.volume = false;
video.src = 'http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4';
video.load();

video.addEventListener('canplaythrough', function () {
    this.play();
}, false);
video.addEventListener('ended', function () {
    this.play();
}, false);

function draw () {
    if (video.readyState === video.HAVE_ENOUGH_DATA) {
        // draw video image to canvas context
        canvas.context.drawImage(video, 0, 0, width, height);
    }
    setTimeout(draw, 1000/60);
}
draw();