Capture frames from video with HTML5 and JavaScript
Solution 1:
Cause
The problem is that seeking video (by setting it's currentTime
) is asynchronous.
You need to listen to the seeked
event or else it will risk take the actual current frame which is likely your old value.
As it is asynchronous you must not use the setInterval()
as it is asynchronous too and you will not be able to properly synchronize when the next frame is seeked to. There is no need to use setInterval()
as we will utilize the seeked
event instead which will keep everything is sync.
Solution
By re-writing the code a little you can use the seeked
event to go through the video to capture the correct frame as this event ensures us that we are actually at the frame we requested by setting the currentTime
property.
Example
// global or parent scope of handlers
var video = document.getElementById("video"); // added for clarity: this is needed
var i = 0;
video.addEventListener('loadeddata', function() {
this.currentTime = i;
});
Add this event handler to the party:
video.addEventListener('seeked', function() {
// now video has seeked and current frames will show
// at the time as we expect
generateThumbnail(i);
// when frame is captured, increase here by 5 seconds
i += 5;
// if we are not past end, seek to next interval
if (i <= this.duration) {
// this will trigger another seeked event
this.currentTime = i;
}
else {
// Done!, next action
}
});