jquery - 无法通过api调用暂停访问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进行演示。