如何找出加载 youtube 嵌入式 iframe 的时间

Posted 2023-02-24

【中文标题】如何找出加载 youtube 嵌入式 iframe 的时间

【英文标题】：How to find out when a youtube embedded iframe is loaded

【发布时间】：2020-03-20 08:47:25

【问题描述】：

我正在尝试将 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>

【问题讨论】：

您可以使用onYouTubeIframeAPIReady ，如文档中所述。 onYouTubeIframeAPIReady – 当页面完成播放器 API 的 javascript 下载后，API 将调用此函数，这样您就可以在页面上使用该 API。因此，此函数可能会创建您希望在页面加载时显示的播放器对象。

【参考方案1】：

实际上iframe 就像页面内的另一个JavaScript 线程。在这种情况下，您可以通过发布message 在线程之间建立连接，并使用addEventListener 收听它们。如下：

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

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

希望我的回答能帮到你我的朋友。

【参考方案2】：

我最终在组件安装时注入脚本并添加事件侦听器，如this answer 中所述。

【参考方案3】：

在您的 html 页面上执行此操作

 <iframe id="ik_player_iframe"
 frameborder="0"  src="https://www.youtube.com/embed/3-vF7ytJxnI"
 ></iframe>

    function onYouTubeIframeAPIReady() 
      //creates the player object
      ik_player = new YT.Player('ik_player_iframe');

      console.log('Video API is loaded');

      //subscribe to events
      ik_player.addEventListener("onReady",       "onYouTubePlayerReady");
      ik_player.addEventListener("onStateChange", "onYouTubePlayerStateChange");
    

    function onYouTubePlayerReady() 
      console.log('Video is ready to play');
    

    function onYouTubePlayerStateChange(event) 
      console.log('Video state changed');