无法通过 api 调用 pauseVideo 访问 youtube 嵌入式 iframe

Question

使用自定义按钮，我想暂停以下嵌入的 youtube 视频：

<iframe id="video1" width="970" height="546" src="https://youtube.com/embed/9IYRC7g2ICg?enablejsapi=1&autoplay=1&controls=0&loop=1&playlist=9IYRC7g2ICg&showinfo=0&modestbranding=0" frameborder="0" allowfullscreen></iframe>

现在当自定义暂停按钮被点击时，它应该暂停视频：

<script type="text/javascript">
  jQuery(document).ready(function($) {
     var ytplayer = new YT.Player('video1');
     $.getScript("http://www.youtube.com/player_api");

     $('#button').click(function() {
        ytplayer.pauseVideo();
     });
    });
</script>

我觉得这条线不知何故失败了：

var ytplayer = new YT.Player('video1');

任何帮助将不胜感激！ :)

Answer 1

脚本命令顺序方面的一些问题。首先，当您创建 YT.player 对象时，必须在 Google 的 YouTube API 库已经加载之后进行。为确保这一点，当您加载库时，它将调用名为“onYouTubeIframeAPIReady”的函数，您需要定义该函数。然而，诀窍是该函数必须在 jQuery 的 document.ready() 函数之外定义（以便在脚本加载并尝试调用它时它就位）。像这样：

var ytplayer;

jQuery(document).ready(function($) {
      $.getScript("http://www.youtube.com/player_api");
      $('#button').click(function() {
        ytplayer.pauseVideo();
      });
 });

 function onYouTubeIframeAPIReady() {
   ytplayer = new YT.Player('video1', {});
 }

另外，在您的 iFrame 中，更改 src 脚本以包含 www 子域（即https://www.youtube.com/embed/..。）以避免如果域不完全匹配，您的 api 调用可能会被拒绝。

这里有一个jsfiddle 来演示。