JSFiddle - React, Tailwind, and code Playground

by Shishir Morshed

HTML

<video id='video'
       controls
       poster="https://media.w3.org/2010/05/sintel/poster.png">
  <source id='mp4'
          src="https://media.w3.org/2010/05/sintel/trailer.mp4"
          type='video/mp4'>
</video>
<canvas></canvas>
<div>

</div>

CSS

video {
  width: 300px; height: auto;
}

JavaScript

var video = document.querySelector("video");
var keyFrames = [5, 10, 15, 20, 25];
var currKf = 0;

var takeScreenshot = function (){
    var canvas = document.querySelector("canvas");
    var wrap =  document.querySelector("div");
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas
    .getContext("2d")
    .drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

    var img = new Image();
    img.src = canvas
    .toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
    
    wrap.appendChild(img);
    
    currKf++;
    triggerScreenShot(currKf)
};

video.addEventListener('seeked', takeScreenshot);

function triggerScreenShot(currKf){
    if(currKf < keyFrames.length){
        video.currentTime = keyFrames[currKf]
    }else {
        video.removeEventListener('seeked', takeScreenshot);
    }
}

triggerScreenShot(currKf)