Почему мой компонент YouTube React дважды запускает событие PlayerState.ENDED перед воспроизведением следующего видео? - PullRequest
Новая
       5

Почему мой компонент YouTube React дважды запускает событие PlayerState.ENDED перед воспроизведением следующего видео?

0 голосов
/ 26 февраля 2020

У меня есть компонент React, который визуализирует и управляет встроенным проигрывателем YouTube с помощью API Iframe YouTube. Родительский компонент управляет очередью видео и передает первый элемент в очереди проигрывателю для воспроизведения.

Как только заканчивается воспроизведение первого видео в очереди, метод handleStateChange() вызывается, как и ожидалось, и я можно увидеть, что событие PlayerState.ENDED было запущено. Затем я вызываю функцию обратного вызова onVideoEnd(), чтобы уведомить родительский компонент о том, что он должен воспроизвести следующее видео в очереди.

Проблема, с которой я столкнулся, заключается в том, что когда второе видео ставится в очередь с помощью функции player.loadVideoById(), оно запускает второе событие PlayerState.ENDED. Это заставляет родителя удалить еще одно видео из очереди, фактически пропуская только что поставленное в очередь видео.

Кто-нибудь может увидеть очевидную причину, почему это происходит? Я проверил, что скрипт API загружается только один раз, поэтому я не думаю, что это проблема.

Вот коды и окно, демонстрирующее это поведение: https://codesandbox.io/s/fancy-smoke-8d7zj

Легче всего увидеть проблему в консоли, когда вы ставите в очередь 3 видео.

Заранее спасибо за любую помощь по этому вопросу.

1 Ответ

0 голосов
/ 27 февраля 2020

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

componentDidUpdate(prevProps) {
  const { player } = this.state;
  const { video } = this.props;

  if (video && prevProps.video !== video) {
    console.log("componentDidUpdate");

    player.seekTo(0);

    player.loadVideoById({
      videoId: video.id,
      startSeconds: video.startSeconds,
      endSeconds: video.endSeconds
    });
  }
}

...

render() {
  return (
    <iframe
      title="ytplayer"
      style={{ display: "block" }}
      id="ytplayer"
      type="text/html"
      width="720"
      height="405"
      src={`https://www.youtube.com/embed/NeKXvINnk04?enablejsapi=1`} // remove "&autoplay=1"
      frameBorder="0"
      allowFullScreen
    />
  );
}

Я подозреваю, что если бы я действительно хотел использовать опцию автозапуска, мне нужно было бы использовать player.cueVideoById() функция вместо player.loadVideoById().

...