Question

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

这是登录浏览器控制台： enter image description here

Answer 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>

Answer 2

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

＆＃13;

 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");
  }

＆＃13;

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

＆＃13;

Youtube API onReady不起作用

2 个答案: