Youtube - 是否可以从状态中传递一个值作为自动播放值（React JS）

Question

我的一个要求是自动播放 youtube 视频一次，但是，onPlayerReady() 函数似乎没有及时收到道具，因此始终默认为 false。我尝试了多种不同的方法，例如在 useEffect 中收听该值并尝试重新渲染视频，但没有任何成功。

以前有没有人遇到过类似的问题？还是我需要挂钩到不同的事件来更新？

我会附上一些示例代码以供视觉参考，如果需要添加更多代码来帮助解决问题，请告诉我！

const initPlayer = new YT.Player(videoId, {
        height,
        width,
        videoId: youtubeId,
        frameborder: '0',
        playerVars: {
          modestbranding: 1,
          rel: 0,
          controls: 0
          mute: 1
          autoplay: autoplayWhenInView ? 1 : 0 // Would like to use this value which is passed from a parent component
        },
        events: {
          'onReady': onPlayerReady, // autoplayWhenInView is false when it's actually true
          'onStateChange': onPlayerStateChange || {},
        }
      });

Answer 1

您可以包装整个组件，然后仅在视图中渲染它，然后autoplay 将始终设置为true。

否则，您需要以编程方式触发播放器实例上的播放方法，因为它已经创建，autoplay 仅用于初始初始化，而不是响应式。

Answer 2

根据上面的评论，我通过在可见时有条件地渲染我的视频组件来解决这个问题。