html前台能取出视频的某一帧嘛,使用HTML5和JavaScript从视频捕获帧

小编典典

原因

问题在于(通过设置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

}

});

2020-05-10