Estaba haciendo un reproductor de video y pensé en insertar una sección donde se presentan al usuario imágenes de lo que puede encontrar en el video. Intenté miserablemente buscar en la red, pero solo hay lienzos para reproducir videos y antes de reproducir el video, debo presentar una vista previa con algunas, por ejemplo, 3, fotos que muestren lo que hay en el video, y no cuando el video es en reproducción.
use el evento buscado y actívelo la primera vez configurando video.currentTime a 0, luego de eso, en el evento, puede continuar configurando al final de la operación una nueva hora actual. Después de todo, elimine el evento y configure el tiempo actual en 0 para restablecer el 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; }