Как зарегистрировать событие на Youtube для воспроизведения видео?

Question

Я работаю над расширением Chrome, которое будет отображать определенные сообщения в зависимости от прогресса воспроизведения видео на Youtube.Например, я покажу сообщение «5 минут», когда видео будет воспроизведено до 5 минут, и покажу сообщение «10 минут», когда видео будет воспроизведено до 10 минут.

Одним из решений является проверка воспроизведения видео.прогрессировать каждую 1 секунду, чтобы узнать время прохождения игры и решить, следует ли нам показывать какое-либо сообщение.Код для получения прогресса воспроизведения приведен ниже:

player = document.getElementById("movie_player");
player.getCurrentTime();

Но я думаю, что лучшим решением было бы зарегистрировать мои сообщения непосредственно на индикатор выполнения видеоплеера.

Чтобы уточнить, когда яскажем, 5 минут и 10 минут, я имею в виду точное время на индикаторе выполнения.Решение также должно обрабатывать такие случаи, как приостановка воспроизведения видео или перетаскивание индикатора выполнения для воспроизведения в определенное время.И в идеале также работает, когда пользователь воспроизводит видео со скоростью 2x, 3x, 4x.

Кто-нибудь знает, есть ли способ зарегистрировать события на индикаторе прогресса игрока?

Answer 1

Использовать HTML5 media timeupdate событие .

Событие timeupdate наступает, когда время, указанное атрибутом currentTime, обновлено.

Частота событий зависит от загрузки системы, но будет выдана между 4 Гц и 66 Гц (при условии, что для обработки обработчиков событий не требуется более 250 мс)

Поскольку YouTube использует элементы <video>чтобы показать видео, должно быть довольно легко подключить слушателя для этого события и обработать все случаи, которые вы упомянули в его обработчике.

document
  .querySelector('video')
  .addEventListener('timeupdate', e => {
    console.log(e.target.currentTime)
  })

.as-console-wrapper {
  max-width: 200px;
  left: auto !important;
}

<video width="320" height="130" controls>
   <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
</video>

Answer 2

Я только что нашел функцию обратного вызова ontimeupdate, которая, кажется, именно то, что я хочу!Я проверю это.

https://www.w3schools.com/tags/av_event_timeupdate.asp