JSFiddle - React, Tailwind, and code Playground

by serGlazkov

HTML

<input type="file" accept="video/*" />
<br/>
<canvas id="prevImgCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

var video = document.createElement("video");

 var canvas = document.getElementById("prevImgCanvas");
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;

 video.addEventListener('loadeddata', function() {
   video.currentTime = 0;
 }, false);

 video.addEventListener('seeked', function() {
   var context = canvas.getContext('2d');
   context.drawImage(video, 0, 0, canvas.width, canvas.height);
 }, false);

 var playSelectedFile = function(event) {
   var file = this.files[0];
   var fileURL = URL.createObjectURL(file);
   console.log(fileURL);
   video.src = fileURL;
 }

 var input = document.querySelector('input');
 input.addEventListener('change', playSelectedFile, false);