jquery - 如何停止选项卡中的视频？

Question

我的网站上有一个选项卡界面，在最后一个选项卡上包含图像和 YouTube 视频。一切正常，但每次我切换标签时，视频都不会停止播放。有没有办法来解决这个问题？提前致谢。

这是我得到的:

Click Here

Answer 1

DEMO — 切换标签页会暂停所有正在播放的视频。

通过使用 YouTube Player API ，您可以播放/暂停/停止视频。

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

<iframe width="510" height="287" src="//www.youtube.com/embed/VIDEO_ID?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

<script>
  $(function(){
    $('iframe[src*="//www.youtube.com/embed/"]').each(function(i) {
      this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
    });
  });
</script>

请注意 ?enablejsapi=1 查询字符串附加到 iframe 中的 YouTube 嵌入 URL。