javascript - 如何找出何时加载了 youtube 嵌入式 iframe

Question

我正在尝试将 youtube iframe 嵌入到我的应用程序中，并监听该 youtube 视频何时加载并准备好播放；我的想法是让用户按下播放按钮，并且不会显示自动播放的嵌入式视频直到视频完全准备好播放，因此用户不必按下按钮和然后等待嵌入式播放器加载。

我试着看一下 this youtube iframe api documentation和各种相关的堆栈溢出，但仍然发现自己陷入了如何向我的 iframe 播放器添加一个监听器以查明视频何时完全加载的问题。 onLoad 全局事件属性似乎也不是我正在寻找的解决方案。我如何才能知道特定的 youtube 嵌入式 iframe 视频何时已完全加载并准备好播放？我是否错误地实现了 iframe api？你可以在下面看到我的尝试。谢谢!

const YoutubePlayer: React = () => {
  const readyFn = () => console.log('ready');
  let player;
  const onYouTubePlayerAPIReady = () => {
    player = new window.YT.Player("youtube-iframe-id", {
      height: '390',
      width: '640',
      videoId,
      events: {
        onReady: readyFn,
      },
    });
  };

  return (
    <iframe
      allowFullScreen
      id="youtube-iframe-id"
      src="https://www.youtube.com/embed/XmnZ9HZTHjw"
    />
  );
};


ReactDOM.render(<YoutubePlayer />, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>

<div id="app"></div>

Answer 1

实际上，iframe 就像页面内的另一个 JavaScript 线程。在这种情况下，您只需通过发送 message 并使用 addEventListener 监听线程之间的连接即可。如下所示:

document.addEventListener('message', () => { /* Do Something */ }, false);

对于 YouTube 的加载，您可以使用 onLoad 方法来发布视频已加载的消息，并将其传递给另一个线程和另一个线程 做点什么。

希望我的回答对你有帮助， friend 。