Youtube API onReady 不工作

Question

这是我的代码：加载后，它应该调用事件--"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>

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

Answer 1

您没有正确调用 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");
  }

<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/02GcUZ6hgzo" frameborder="0" allowfullscreen></iframe>

Answer 2

您需要修改：

首先：使用脚本从 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>

Youtube API onReady 不工作

Youtube API onReady doesn't work

javascript

youtube