Блог

Я пытаюсь выполнить некоторую логику всякий раз, когда пользователь воспроизводит / приостанавливает видео, реализованное с использованием Video-React:

 <Player
  ref={(player) => {
    this.player = player;
  }}
  src={videoURL}
>
  <BigPlayButton position="center" />
  <ControlBar autoHide={false} className="my-class"></ControlBar>
</Player>;
 

Таким образом, пользователь может воспроизводить / приостанавливать видео тремя способами:

1. Используя BigPlayButton он может воспроизводить видео:
   
2. С помощью кнопки воспроизведения / паузы на панели управления:
   
3. Нажатие на само видео приведет к его воспроизведению / приостановке.

Итак, мне нужно определять, когда происходит любое из этих трех событий.

Для первого события «С помощью BigPlayButton он может воспроизводить видео» было предложено настроить саму кнопку.

Для второго события, «С помощью кнопки воспроизведения / паузы на панели управления», я не нашел ничего, что показывало бы, как я могу обнаружить событие onClick, когда пользователь нажимает на одну из кнопок панели управления.

Для третьего события «Нажатие на само видео приведет к его воспроизведению / приостановке»., Я ничего не нашел.

Я думал, что использование состояния, как указано в документации, легко решит все три:

Состояние Мы используем redux для управления состоянием проигрывателя. С помощью метода getState можно получить объект состояния. Это список всех состояний.

Это частично решает проблему приостановки:

приостановлено: возвращает, был ли приостановлен проигрыватель

Но я не нашел свойство состояния, которое изменяется при воспроизведении видео. Самое близкое к этому — hasStarted:

hasStarted: возвращает, было ли запущено видео

Проблема с hasStarted заключается в том, что для него устанавливается значение true при первом воспроизведении видео.
И поэтому последующие воспроизведения не будут обнаружены.
И я нахожусь в неоднозначном состоянии, где this.player.paused amp; this.player.hasStarted оба true .
Любое предложение приветствуется.