如何停止标签中的视频？答案

【问题标题】：How to stop video in tab?如何停止标签中的视频？
【发布时间】：2012-10-26 22:05:02
【问题描述】：

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

这是我得到的：

Click Here

【问题讨论】：

这可以简化为一个小测试用例，其中包含一个包含视频的 div 和一个在点击时显示和隐藏 div 的按钮。那时您可以在问题中正确包含代码。一种可能的解决方法是刷新 iframe，尽管当前位置和 d/l 进度将被重置。

标签： jquery video tabs

【解决方案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>

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

【讨论】：

哎呀，复制所有代码后它实际上并没有工作。哦，男孩 :( 我真的不知道出了什么问题，因为它在演示页面中运行良好 o_O 我认为如果你能确切地看到我所拥有的会更好Click Here to download 非常感谢你抽出宝贵的时间！
1.您在<!DOCTYPE html> 之后缺少<html> 标签。
2.您的 jQuery 封装在 scripts.js 中的错误 (function($){ ... })(jQuery); 内的代码不会等待 DOM 准备好并立即执行。您所有的 jQuery 都应该包含在 jQuery(function($){ ... }); 中，这将导致它在 DOM 准备好（文档已加载）后运行。见jsfiddle.net/9YaP9
哦，对不起，非常感谢！在此期间，我只是有点忙。刚刚测试了脚本，它运行良好。再次感谢您的宝贵时间！
您可以从选择器中删除“http:”以避免任何 SSL 问题。

【解决方案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":""}', '*'); 
});

详情请访问How to pause or stop youtube, vimeo and html5 video on tab change

【讨论】：