Youtube API 有时没有准备好答案

【问题标题】：Youtube API not ready sometimesYoutube API 有时没有准备好
【发布时间】：2017-07-03 11:31:31
【问题描述】：

我正在尝试使用他们的 API 包含一个 youtube 视频。但是，有时（真的是随机的。大多数时候它有效）当我点击我的播放按钮时会出现错误：

Cannot read property 'playVideo' of undefined

这就是我包含 API 的方式：

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-intro', {
        width: 100,
        height: 100,
        videoId: '<id>',
        playerVars: {
            color: 'white',
            controls: 0,
            showinfo: 0
        }
    });
}

$(document).ready(function() {
    $('#play-intro').click(function() {
       player.playVideo();
       $('#video-intro').addClass('showvid');
    });
});

#video-intro {
  display: none;
  &.showvid {
    display: block;
  }
}

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

<body>
  <div id="video-intro"></div>
  <a id="play-intro">Play</a>
</body>

【问题讨论】：

标签： javascript jquery youtube

【解决方案1】：

您需要调用事件来启动播放器。而且你不能在加载之前播放视频。这不是您收到未定义错误的原因。我现在添加了事件和功能检查。更好的例子可以在这里找到enter link description here

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-intro', {
        width: 100,
        height: 100,
        videoId: 'TZbUi0FP5AM', //T7Kmc7T-pjY (old, short)
        playerVars: {
            color: 'white',
            controls: 0,
            showinfo: 0
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
    });
    
}
 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();
 }      
      
      
      
$(document).ready(function() {
    $('#play-intro').click(function() {
       onYouTubeIframeAPIReady();
      
       $('#video-intro').addClass('showvid');
    });
});

#video-intro {
  display: none;
  &.showvid {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <script src="https://www.youtube.com/iframe_api"></script>
</head>

<body>
  <div id="video-intro"></div>
  <a id="play-intro">Play</a>
</body>

【讨论】：

嗯，但现在我的视频已经开始在后台播放了（我听到了声音，持续了 6 秒）。我只希望它在我按下按钮时播放。此外，我的“关闭/停止”按钮不再起作用。我的关闭按钮调用这些函数： player.pauseVideo(); player.seekTo(0);.但它给出了 stopVideo 和 pauseVideo 不存在的错误。
你的意思是你想要播放器播放/暂停按钮或者你需要外部按钮来播放？ @蛋糕

【解决方案2】：

不幸的是，它在 SO Snippet 中不起作用。尝试先显示元素（您的 CSS 不起作用）然后调用 player.playVideo() 否则它会给出错误，如您的问题所示。

使用下面的 CSS 显示您的 iframe，

#video-intro {
  display: none;
}
#video-intro.showvid {
  display: block !important;
}

HTML：

<div id="video-intro"></div>
<a id="play-intro">Play</a>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
  var player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-intro', {
      width: 100,
      height: 100,
      videoId: 'TZbUi0FP5AM', //T7Kmc7T-pjY (old, short)
      playerVars: {
        color: 'white',
        controls: 0,
        showinfo: 0
      }
    });
  }
  document.getElementById("play-intro").addEventListener("click", function() {
    document.getElementById('video-intro').className = 'showvid';
    player.playVideo();
  });
</script>

Fiddle

【讨论】：