Youtube API onReady 不起作用答案

【问题标题】：Youtube API onReady doesn't workYoutube API onReady 不起作用
【发布时间】：2015-03-02 01:35:06
【问题描述】：

这是我的代码：加载后，它应该调用事件--“onReady”，然后在浏览器控制台中打印出“My player is onReady”。但它没有显示。基本上，这是 YouTube API 使用的一个非常简单的示例，但我在这里找不到问题所在。甚至我也遵循了 youtube 视频中的步骤。

有什么帮助吗？提前谢谢你！

<html>
<head> 
  <meta charset="UTF-8"> 
  <title>THis is YOutube API testing </title>
</head>

<body>

   <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/02GcUZ6hgzo" frameborder="0" allowfullscreen></iframe>
  <script>
  //import YouTube API script
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  //create the YouTube Player
  var player;

  function onYouTubeIframeAPIReady() {
    console.log("API  is Ready");
    player = new YT.Player("video", { 
    events:{
      'onReady': onPlayerReady
      } 
    });
  }
  function onPlayerReady() {
    console.log("My plaer is onReady");
  }
  </script>
</body>
</html>

这里是登录浏览器控制台：

【问题讨论】：

标签： javascript youtube

【解决方案1】：

你需要修改：

首先：从 youtube 导入带有脚本的 API。

<script async src="https://www.youtube.com/iframe_api"></script>

导入 youtube API 后，您就可以开始编写视频播放器了。

//create the YouTube Player
function onYouTubeIframeAPIReady() {
  console.log("API is ready.")
  var player;
  player = new YT.Player('videoLoader'/*Specific your div ID here for display the video.*/, {
    videoId: '34xO919uKdY', // Specific your video ID http://www.youtube.com/embed/videoIDHere
    width: '560', // Specific width
    height: '315',  // Specific height
    playerVars: {
      end: 0, autoplay: 1, loop: 0, controls: 0, showinfo: 0, modestbranding: 1, fs: 0, cc_load_policty: 0, iv_load_policy: 3, autohide: 0
    }, events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady() {
  console.log("My player is onReady");
}

在此之后，您需要创建一个 div，这个 div 包含您的视频。

//create DIV spacer
<div id="videoLoader"></div>

完整无误：

<html>
<head> 
 <meta charset="UTF-8"> 
 <title>This is Youtube API test</title>
 <script async src="https://www.youtube.com/iframe_api"></script>
 <script>

  //create the YouTube Player
  function onYouTubeIframeAPIReady() {
   console.log("API is ready.")
   var player;
   player = new YT.Player('videoLoader'/*Specific your div ID here for display the video.*/, {
     videoId: '34xO919uKdY', // Specific your video ID http://www.youtube.com/embed/videoIDHere
     width: '560', // Specific width
     height: '315',  // Specific height
     playerVars: {
      end: 0, autoplay: 1, loop: 0, controls: 0, showinfo: 0, modestbranding: 1, fs: 0, cc_load_policty: 0, iv_load_policy: 3, autohide: 0
     }, events: {
      'onReady': onPlayerReady
     }
    });
   }

   function onPlayerReady() {
    console.log("My player is onReady");
   }

 </script>
</head>
<body>
 <!--Create iframe with the video player-->
 <div id="videoLoader"></div>
</body>
</html>

【讨论】：

【解决方案2】：

您没有正确调用onPlayerReady() 函数。

 var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  //create the YouTube Player
  var player;

  function onYouTubeIframeAPIReady() {
    console.log("API  is Ready");
    player = new YT.Player("video", { 
    events:{
      'onReady': onPlayerReady()
      } 
    });
  }
  function onPlayerReady() {
    console.log("My player is onReady");
  }

&lt;iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/02GcUZ6hgzo" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;

【讨论】：

但是为什么视频中的例子有效？ -- youtube.com/embed/02GcUZ6hgzo
而且我刚刚在google的官方文档中发现，它没有添加“（）”。这是链接--developers.google.com/youtube/iframe_api_reference
是的，我可以看到。我不知道为什么 - API 中的 onReady 事件正在触发，但我可以让 onPlayerReady 函数触发的唯一方法是如上。
请注意，上面的答案是错误的，onReady 处理程序触发的唯一原因是因为它是直接执行的，因为它的名称后面有()，意味着它被直接调用。请参阅Youtube Embed Iframe - Events Not Firing In Local 以获取具有良好答案的类似问题。
我遇到了同样的问题，我注意到如果我将鼠标移到浏览器窗口中，onReady 函数将触发。 onReady 函数是否可能与某种浏览器活动相关联？