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 для этого.

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>