时间戳

首页 > 解决方案 > 为什么我的 YouTube React 组件会在播放下一个视频之前触发两次 PlayerState.ENDED 事件？

javascript - 为什么我的 YouTube React 组件会在播放下一个视频之前触发两次 PlayerState.ENDED 事件？

问题描述

我有一个 React 组件，它使用 YouTube Iframe API 呈现和控制嵌入式 YouTube 播放器。父组件管理一个视频队列，并将队列中的第一项传递给要播放的播放器。

一旦队列中的第一个视频播放完毕，handleStateChange()就会按预期调用该方法，我可以看到该PlayerState.ENDED事件已被触发。然后我调用onVideoEnd()回调来通知父组件它应该播放队列中的下一个视频。

我遇到的问题是，当第二个视频通过player.loadVideoById()函数排队时，它会触发第二个PlayerState.ENDED事件。这会导致父母从队列中删除另一个视频，从而有效地跳过新排队的视频。

任何人都可以看到发生这种情况的明显原因吗？我已经验证了 AP​​I 脚本只加载了一次，所以我认为这不是问题所在。

这是一个演示此行为的代码框：https ://codesandbox.io/s/fancy-smoke-8d7zj

当您排队 3 个视频时，最容易在控制台中看到问题。

提前感谢您对此的任何帮助。

标签： javascriptreactjsyoutube-api

解决方案

解决方案似乎是在播放下一个视频之前禁用自动播放和寻求 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().

推荐阅读