【问题标题】: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.您在&lt;!DOCTYPE html&gt; 之后缺少&lt;html&gt; 标签。
  • 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

【讨论】:

    猜你喜欢
    • 2012-08-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-02-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多