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。

stopVideoFor花费了我用来停止视频的毫秒数，只要当前帧位于stopframes（if (stopframes.includes(frame)) {）中即可。

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>

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

1 个答案: