原因

问题是寻找视频（通过设置它的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 past end, seek to next interval
  if (i <= this.duration) {
    // this will trigger another seeked event
    this.currentTime = i;
  }
  else {
    // Done!, next action
  }
});