JSFiddle - React, Tailwind, and code Playground

by serGlazkov

HTML

<canvas id="prevImgCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

function getVideoImage(videoPath) {
  const video = document.createElement('video');
  video.src = videoPath;

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

  const canvas = document.getElementById('prevImgCanvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  const context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
}

getVideoImage('/Users/sglazkov/Desktop/demo-videos/small.mp4');