HTML5视频:使用JavaScript在特定帧处停止

Question

我有一个标准的HTML5视频元素。我想暂停视频在特定的帧(而不是分钟)通过纯JavaScript。

<video id="media-video" controls>
    <source id="media-source" src="media/video.mp4" type="video/mp4">
</video>

还给出了一个JavaScript数组，它定义了视频应该停止的帧。

var stopframes = [300, 600, 900];

不幸的是，我只有一个解决方案，可以在特定时间以秒为单位停止视频：

video.addEventListener('timeupdate', function () {
    if (mediaPlayer.currentTime > stopframes[0]) {
        ...
    }
});

如何使用纯JavaScript在特定帧停止视频？

Answer 1

您可以使用VideoFrame.js来实现这一点。

每当当前帧在stopframes (if (stopframes.includes(frame)) {)中时，stopVideoFor会花费一些毫秒的时间来停止视频：

​

var stopframes = [30, 60, 90, 132];

var currentFrame = $('#currentFrame');
var video = VideoFrame({
  id: 'video',
  frameRate: 29.97,
  callback: function(frame) {
    if (stopframes.includes(frame)) {
      stopVideoFor(1000);
    }
  }
});

function stopVideoFor(ms) {
  video.video.pause();
  video.stopListen();

  setTimeout(() => {
    video.video.play();
    video.listen('frame');
  }, ms);
}

$('#play-pause').click(function() {
  if (video.video.paused) {
    video.video.play();
    video.listen('frame');
    $("#play-pause").html('Pause');
  } else {
    video.video.pause();
    video.stopListen();
    $("#play-pause").html('Play');
  }
});

<script src="https://rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video height="180" width="100%" id="video"> 
  <source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>

<div id="controls">
  <button id="play-pause">Play</button>
</div>

​