Question

我有如下所述的脚本：YouTube Player API：

<!DOCTYPE html>
<html>
  <!-- ... -->
  <body>
    <h1>Youtube Video</h1>

    <div id="player"></div>

    <script type="text/javascript">
      // Load the IFrame Player API code asyncronously
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";

      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // Creating an iframe and youtube player
      var player;
      function onYoutubeIframeAPIReady(){
        console.log("Youtube API Loaded");

        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'LSwbPyIP-gY',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // When video_player is ready, call this function
      function onPlayerReady(event){
        event.target.playVideo();
      }

      var done = false;
      function onPlayerStateChange(event){
        if (event.data == YT.PlayerState.PLAYING && !done){
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }

      function stopVideo(){
        player.stopVideo();
      }
    </script>
  </body>
</html>

重新加载页面后，没有任何问题。所以，在脚本的最后，我调用了这个函数：

onYoutubeIframeAPIReady();

这样做，给我一个错误：

（index）：25未捕获的ReferenceError：YT未定义

但是当我检查生成的源代码时，我会在脚本标记之前看到这两行：

<script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflWkc-3E/www-widgetapi.js" async=""></script>
<script src="https://www.youtube.com/iframe_api"></script>

如果正在加载IFrame Player API代码，为什么我收到错误“YT未定义”？我错过了什么？

要运行此测试，我使用的是Google Chrome 51.0.2704.79（64位）

Answer 1

您不必自己致电onYoutubeIframeAPIReady。

Youtube服务器端代码为您调用它。

检查他们的代码，你会发现这段代码：

    var Sb = l("onYTReady");
    Sb && Sb();
    var Tb = l("onYouTubeIframeAPIReady");
    Tb && Tb();
    var Ub = l("onYouTubePlayerAPIReady");
    Ub && Ub();

您只需加载脚本，然后调用您的函数。

Youtube API不会工作

1 个答案: