Erfassen Sie Frames aus Videos mit HTML5 und JavaScript
Ich möchte alle 5 Sekunden ein Bild aus einem Video aufnehmen.
Dies ist mein JavaScript-Code:
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);
}
Das Problem, das ich habe, ist, dass die ersten beiden generierten Bilder gleich sind und das 5-Sekunden-Bild nicht generiert wird. Ich fand heraus, dass das Thumbnail generiert wird, bevor das Videobild der bestimmten Zeit in angezeigt wird< video>
Etikett.
Zum Beispiel, wennvideo.currentTime = 5
wird ein Bild von Frame 0s erzeugt. Dann springt das Videobild zur Zeit 5s. Also wannvideo.currentTime = 10
wird ein Bild von Bild 5s erzeugt.