从HTML5和JavaScript的视频捕获帧

我想每5秒从视频中捕获一帧。

这是我的JavaScript代码：

video.addEventListener('loadeddata',function() {
    var duration = video.duration;
    var i = 0;

    var interval = setInterval(function() {
        video.currentTime = i;
        generateThumbnail(i);
        i = i+5;
        if (i > duration) clearInterval(interval);
    },300);
});

function generateThumbnail(i) {     
    //generate thumbnail URL data
    var context = thecanvas.getContext('2d');
    context.drawImage(video,220,150);
    var dataURL = thecanvas.toDataURL();

    //create img
    var img = document.createElement('img');
    img.setAttribute('src',dataURL);

    //append img in container div
    document.getElementById('thumbnailContainer').appendChild(img);
}

我遇到的问题是生成的第一个两个图像是相同的，持续时间-5秒的图像不会被生成。我发现缩略图是在特定时间的视频帧显示在<视频>标签。 例如，当video.currentTime = 5时，生成帧0的图像。然后视频帧跳到时间5s。所以当video.currentTime = 10时，生成帧5s的图像。

解决方法

原因

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

Demo here