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.
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;
}