Get frame from Video using JS

Question

I was making a video player and I thought of inserting a section where images of what you can find in the video are presented to the user. I tried miserably to search on the net but there are only canvas of playing videos and before playing the video I should present a preview with a few, for example 3, photos that show what there is in the video, and not when the video is in reproduction.

Answer 1

use event seeked and trigger it the first time setting the video.currentTime to 0, after that in the event you can continue to set at the end of the operation a new current time. After all remove the event and set the currentTime to 0 to reset the video.

<script>
const maxDeltas = 5; // 5 thumbnails
let index = 1;
let video = document.getElementById("mainVideo");
let thumbNailsOffset = 0;

function SpawnCanvas(i) {
    let previewDiv = document.getElementById("preview");
    let canvas = document.createElement("canvas");
    canvas.id = i;
    previewDiv.appendChild(canvas);
    return canvas;
}

function OnSeeked(event) {
    console.log('Video found the playback position it was looking for.');
    let canvas = SpawnCanvas(index);
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
    video.currentTime = thumbNailsOffset * index;
    index++;
    if (index > maxDeltas) {
        video.removeEventListener('seeked', OnSeeked);
        video.currentTime = 0;
    }
}

function Test() {
   video = document.getElementById("mainVideo");
   thumbNailsOffset = Math.trunc(video.duration) / maxDeltas;
   video.addEventListener('seeked', OnSeeked);
   video.currentTime = 0;
}