JSFiddle - React, Tailwind, and code Playground

by wesbos

HTML

<video id="example1" controls="" preload="none" width="350" height="196" poster="http://media.w3.org/2010/05/sintel/poster.png">
              <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
              <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
              <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
              <p>Your user agent does not support the HTML5 Video element.</p>
        </video>

        <canvas id="example1Canvas"></canvas>

JavaScript

// Setup Video
var        example1 = document.querySelector('#example1'),
        canvas = document.querySelector("#example1Canvas"),
        ctx = canvas.getContext("2d");

        // set the canvas height to be equal to the video
        canvas.height = example1.height;
        canvas.width = example1.width;

function videoToCanvas() {
    // Draw the video to canvas
    ctx.drawImage(example1, 0, 0, example1.width, example1.height);
}

/* Events */

example1.addEventListener('play', function() {
    vidInterval = setInterval(videoToCanvas,50);
    console.log('started!');
});

example1.addEventListener('pause', function() {
    clearInterval(vidInterval);
    console.log('pause!');
});

example1.addEventListener('ended', function() {
    clearInterval(vidInterval);
    console.log('Done!');
});