HTML5 приостановить видео в определенных точках

Question

У меня есть видео, и я хотел бы сделать паузу в паре разных точек в зависимости от текущего времени видео. Будет 3 остановки, одна за 5 секунд, одна за 10 секунд и одна за 15 секунд. При каждой остановке появляется кнопка, чтобы продолжить воспроизведение видео. Я не уверен, как заставить это работать, потому что currentTime никогда точно не достигает этих точек, поэтому в настоящее время я должен использовать >= время остановки, что означает, что 5-секундная точка остановки будет непрерывно срабатывать.

var video = $('#video').get(0);

video.addEventListener('timeupdate', function() {
    if(this.currentTime >= 5) {
        console.log('5 seconds');
        this.pause();
        $('button').css('display','block');
    }
    
    if(this.currentTime >= 10) {
      console.log('10 seconds');
      this.pause();
      $('button').text('Part 3');
      $('button').css('display','block');
    }
    
    if(this.currentTime >= 15) {
      console.log('15 seconds');
      this.pause();
      $('button').text('Part 4');
      $('button').css('display','block');
    }
});

$('button').click(function() {
  video.play();
  $('button').css('display','none');
});

button {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>

<button>Part 2</button>

Answer 1

Как вы уже видели, timeupdate не всегда имеет интервал , точный . Это может быть несколько миллисекунд.

Чтобы исправить возникшую проблему, вы можете сохранить переменную, которая будет содержать последнюю точку в видео, которое произошло timeupdate, и включить ее в ваши if условия:

var $video = $('#video');
var video = $video.get(0);

video.addEventListener('timeupdate', function() {
  var lastCheckedAt = $video.data('lastcheck') || 0;
  $video.data('lastcheck', this.currentTime);
  
  if (this.currentTime >= 5 && lastCheckedAt < 5) {
    console.log('5 seconds');
    this.pause();
    $('button').show();
  } else if (this.currentTime >= 10 && lastCheckedAt < 10) {
    console.log('10 seconds');
    this.pause();
    $('button').text('Part 3').show();
  } else if (this.currentTime >= 15 && lastCheckedAt < 15) {
    console.log('15 seconds');
    this.pause();
    $('button').text('Part 4').show();
  }
});

$('button').click(function() {
  video.play();
  $('button').hide();
});

button {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="video" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>

<button>Part 2</button>

Также обратите внимание на использование show() и hide() вместо прямого вызова css().