JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <span>http://jsfiddle.net/vphyr/</span>
  <video muted controls id="videoPlayer">
    <source id='currentVID' src="http://html5multimedia.com/code/ch9/media/elephants-dream-medium.mp4" type="video/mp4">

  </video>
</div>
<div id="screen">
  <img id="tst" />
</div>
<input id="newlocalFILE" name="localfile" size="50" maxlength="100000" accept="video/*" type="file">

JavaScript

var VideoSnapper = {
   captureAsCanvas: function(video, options, handle) {
     var waitForMetadata = function() {
         video.currentTime = options.time;
       };
     
     // Create canvas and call handle function
     var callback = function() {
       // Create canvas
       var canvas = $('<canvas />').attr({
         width: options.width,
         height: options.height
       })[0];
       // Get context and draw screen on it
       canvas.getContext('2d').drawImage(video, 0, 0, options.width, options.height);
       // Seek video back if we have previous position 
       if (prevPos) {
         // Unbind seeked event - against loop
         $(video).unbind('seeked');
         video.removeEventListener('loadedmetadata', waitForMetadata, false);
         // Seek video to previous position
         video.currentTime = prevPos;
       }
       // Call handle function (because of event)
       handle.call(this, canvas);
     }

     // If we have time in options 
     if (options.time && !isNaN(parseInt(options.time))) {
       // Save previous (current) video position
       var prevPos = video.currentTime;

       // Seek to any other time
       video.addEventListener('loadedmetadata', waitForMetadata, false);
       //OLD CODE: video.currentTime = options.time;

       // Wait for seeked event
       $(video).bind('seeked', callback);
       return;
     }

     // Otherwise callback with video context - just for compatibility with calling in the seeked event
     return callback.apply(video);
   }
 };


 $(document).ready(function() {
   $('#newlocalFILE').on('change', function() {
     var player = document.getElementById("videoPlayer");
     var currentVID = document.getElementById('currentVID');
     var selectedLocalVID = document.getElementById('newlocalFILE').files[0];


     currentVID.setAttribute('src', URL.createObjectURL(selectedLocalVID));
     player.load();
     player.play();

     var canvases = $('canvas');
    ...