html5获取视频帧,从HTML5和JavaScript的视频捕获帧

原因

问题是寻求视频(通过设置它的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

}

});