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库加载后进行。为了确保这一点，当您加载库时，它将调用一个名为＆on; YouYouTubeIframeAPIReady的函数，这是您需要定义的函数。但诀窍在于，该函数必须在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来演示。

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

1 个答案: