capture html5,html - Capture frames from video with HTML5 and JavaScript - Stack Overflow

I want to capture a frame from video every 5 seconds.

This is my 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);

}

The problem I have is the 1st two images generated are the same and the duration-5 second image is not generated. I found out that the thumbnail is generated before the video frame of the specific time is displayed in < video> tag.

For example, when video.currentTime = 5, image of frame 0s is generated. Then the video frame jump to time 5s. So when video.currentTime = 10, image of frame 5s is generated.