Captura fotogramas de video con HTML5 y JavaScript
Quiero capturar un cuadro del video cada 5 segundos.
Este es mi código JavaScript:
video.addEventListener('loadeddata', function() {
var duration = video.duration;
var i = 0;
var interval = setInterval(function() {
video.currentTime = i;
generateThumbnail(i);
i = i+5;
if (i > duration) clearInterval(interval);
}, 300);
});
function generateThumbnail(i) {
//generate thumbnail URL data
var context = thecanvas.getContext('2d');
context.drawImage(video, 0, 0, 220, 150);
var dataURL = thecanvas.toDataURL();
//create img
var img = document.createElement('img');
img.setAttribute('src', dataURL);
//append img in container div
document.getElementById('thumbnailContainer').appendChild(img);
}
El problema que tengo es que las primeras dos imágenes generadas son iguales y la imagen de duración de 5 segundos no se genera. Descubrí que la miniatura se genera antes de que se muestre el cuadro de video del tiempo específico en< video>
etiqueta.
Por ejemplo, cuandovideo.currentTime = 5
, se genera la imagen del cuadro 0s. Luego el cuadro de video salta a tiempo 5s. Así que cuandovideo.currentTime = 10
, se genera la imagen del cuadro 5s.