使用 HTML5 和 JavaScript 从视频中捕获帧 [英] Capture frames from video with HTML5 and JavaScript

问题描述

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

I want to capture a frame from video every 5 seconds.

这是我的 JavaScript 代码:

This is my JavaScript code:

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, 0, 0, 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 秒的图像.我发现缩略图是在显示特定时间的视频帧之前生成的视频> 标签.

The problem I have is the 1st two images generated are the same and the duration-5 second image is not generated. I found out that the thumbnail is generated before the video frame of the specific time is displayed in < video> tag.

例如，当video.currentTime = 5时，生成第0帧的图像.然后视频帧跳到时间5s.所以当video.currentTime = 10时，生成第5s帧的图像.

For example, when video.currentTime = 5, image of frame 0s is generated. Then the video frame jump to time 5s. So when video.currentTime = 10, image of frame 5s is generated.

推荐答案

原因

问题在于寻找视频(通过设置currentTime)是异步的.

您需要聆听seeked 事件，否则它会冒险使用实际的当前帧，这可能是您的旧值.

You need to listen to the seeked event or else it will risk take the actual current frame which is likely your old value.

因为它是异步的，所以您必须不要使用 setInterval() 因为它也是异步的，并且在寻找下一帧时您将无法正确同步.无需使用 setInterval()，因为我们将使用 seeked 事件代替，这将保持一切同步.

As it is asynchronous you must not use the setInterval() as it is asynchronous too and you will not be able to properly synchronize when the next frame is seeked to. There is no need to use setInterval() as we will utilize the seeked event instead which will keep everything is sync.

通过稍微重新编写代码，您可以使用 seeked 事件来浏览视频以捕获正确的帧，因为该事件通过设置确保我们实际上处于我们请求的帧currentTime 属性.

By re-writing the code a little you can use the seeked event to go through the video to capture the correct frame as this event ensures us that we are actually at the frame we requested by setting the currentTime property.

示例

// 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;
});

将此事件处理程序添加到聚会中:

Add this event handler to the party:

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 past end, seek to next interval
  if (i <= this.duration) {
    // this will trigger another seeked event
    this.currentTime = i;
  }
  else {
    // Done!, next action
  }
});

这篇关于使用 HTML5 和 JavaScript 从视频中捕获帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！