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

IT技术 javascript reactjs iframe youtube youtube-iframe-api
2021-05-04 06:12:26

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

我尝试查看这个 youtube iframe api 文档和各种相关的堆栈溢出，但仍然发现自己被困在如何向 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>

3个回答

实际上 aniframe就像页面内的另一个 JavaScript 线程。在这种情况下，您可以在线程之间建立连接，message并使用addEventListener. 像下面这样：

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

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

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

我最终在组件安装时注入了脚本并添加了此答案中概述的事件侦听器。

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

 <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');
    }
其它你可能感兴趣的问题
上一篇React路由器重定向页面但组件没有被渲染 下一篇如何读取通过服务器端（node-express）Passport 设置的客户端（react）cookie？