如何确定何时加载了YouTube嵌入式iframe

2024-05-19 • 问答

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

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

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

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

希望我的回答对我的朋友有帮助。

执行此操作

 <iframe id="ik_player_iframe"
 frameborder="0" height="315" src="https://www.youtube.com/embed/3-vF7ytJxnI"
 width="560"></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');
    }

我最终在安装组件时注入了脚本，并按照this answer所述添加了事件监听器。

如何确定何时加载了YouTube嵌入式iframe

qiaoshai 回答：如何确定何时加载了YouTube嵌入式iframe

大家都在问