Блог

У меня есть элемент video в HTML

 <video id="video_player" controls>
  <source src="{{object.video_file.url}}" type="video/mp4">
    Your browser does not support the video tag.
</video>
  

Я хочу проверить, воспроизводится ли видео в течение последовательных 30 секунд независимо от того, где оно начинается, чтобы получить количество.

Как написать JavaScript для этого здесь

 $("#video_player")[0].addEventListener('timeupdate',(e) =>{
 // logic
})
  

Вам нужно отслеживать, когда видео запускается, останавливается или приостанавливается. Давайте сохраним это в переменной:

var startTime = new Date();

Создайте функцию для сброса таймера:

 function reset() {
  startTime = new Date();
}
  

Всякий раз, когда пользователь запускает, останавливает или приостанавливает видео, сбрасывайте таймер:

 $('#video_player')[0].addEventListener('play', reset);
$('#video_player')[0].addEventListener('pause', reset);
$('#video_player')[0].addEventListener('stop', reset);
  

Наконец, когда видео воспроизводится, проверьте, как долго оно воспроизводится:

 $('#video_player')[0].addEventListener('timeupdate', (e) => {
  let elapsedSeconds = ( new Date() - startTime ) / 1000;
  console.log( `Video has been playing for ${elapsedSeconds} seconds` );
  if ( elapsedSeconds > 30 ) {
    console.log( 'Video has been playing for more than 30 seconds!' );
    // Do something special
  }
});