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

Posted 2023-05-09

【中文标题】无法通过 api 调用 pauseVideo 访问 youtube 嵌入式 iframe

【英文标题】：Can't access youtube embedded iframe with api call pauseVideo

【发布时间】：2014-10-30 06:38:24

【问题描述】：

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

<iframe id="video1"   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');

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

【参考方案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 来演示。