原因
问题在于(通过设置currentTime
)查找视频是异步的。
您需要收听seeked
事件,否则可能会冒取当前实际帧的风险,这很可能是您的旧值。
由于它是异步的,因此您也不能使用setInterval()
它,因为它也是异步的,并且当寻求下一帧时,您将无法正确同步。无需使用,setInterval()
因为我们将利用seeked
事件来代替,这将使所有内容保持同步。
解
通过稍微重写代码,您可以使用该seeked
事件来遍历视频以捕获正确的帧,因为此事件可确保我们实际上位于通过设置该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
}
});