JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<video controls id="vid">
    <source src="http://www.808.dk/pics/video/gizmo.webm" type="video/webm" />
</video>
<canvas id="canv"></canvas>

JavaScript

var canvas,
    context,
    video;
video = document.getElementById('vid');
canvas = document.getElementById('canv');

video.style.height = video.clientWidth;

context = canvas.getContext('2d');
window.setInterval(function () {
    canvas.width = 300;
    canvas.height = 300;
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
}, 40);