原因
问题是寻求视频(通过设置它的currentTime)是异步的。
您需要聆听被请求的事件,否则将冒险采取实际的当前框架,这可能是您的旧价值。
由于它是异步的,所以不能使用setInterval(),因为它是异步的,当下一个框架被查找时,您将无法正确同步。没有必要使用setInterval(),因为我们将使用seekked事件,而不会使所有内容都同步。
解
通过重写代码,您可以使用被查看的事件来浏览视频以捕获正确的帧,因为此事件确保我们实际上是通过设置currentTime属性在我们请求的帧。
例
// 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;
});
将此事件处理程序添加到聚会中:
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 passed end,seek to next interval
if (i <= this.duration) {
// this will trigger another seeked event
this.currentTime = i;
}
else {
// Done!,next action
}
});