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

Question

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

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

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

有人能看出发生这种情况的明显原因吗？我已经验证了API脚本只加载一次，所以我不认为这是问题所在。

下面是一个代码沙盒，演示了这种行为：https://codesandbox.io/s/fancy-smoke-8d7zj

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

提前感谢您在这方面的帮助。

Answer 1

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