jquery - 如何停止标签中的视频？

Question

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

这就是我得到的：

点击这里

Answer 1

演示- 切换标签会暂停所有正在播放的视频。

通过使用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附加到 YouTube 嵌入 URL 中的查询字符串iframe。

Answer 2

<iframe class="popup-youtube-player" src="https://www.youtube.com/embed/C0DPdy98e4c?enablejsapi=1&version=3&playerapiid=ytplayer" width="640" height="360" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>

$('.tabs li a').on('click', function() {

$('.popup-youtube-player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
});

有关详细信息，请访问如何在选项卡更改时暂停或停止 youtube、vimeo 和 html5 视频