reactjs - 如何在React中捕获YouTube iframe API事件

Question

我使用iframe导入YouTube嵌入网址

<iframe
          id="ytVideo"
          src={embed_url}
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;"
 ></iframe>

然后我想在youtube视频onPlay和onPause时收听事件

为此，我在useEffect上设置了 window.addEventListener以获取iframe的postMessage事件 onStateChange event

useEffect(() => {
    window.addEventListener("message", event => {
      console.log("event", event.data);
    });
    return () => {};
  }, []);

但是播放youtube视频时没有任何捕捉。

Answer 1

这是Google建议您设置的方式。它涉及到设置一个YT.Player对象。

https://developers.google.com/youtube/iframe_api_reference