jQuery - 带有视频的标签...当我在标签之间切换时如何让视频停止播放？

Posted 2023-02-24

【中文标题】jQuery - 带有视频的标签...当我在标签之间切换时如何让视频停止播放？

【英文标题】：jQuery - Tab with videos... how do I get videos to stop playing when I switch between tabs?

【发布时间】：2012-02-02 15:42:18

【问题描述】：

我是 jQuery 新手，我设法创建了一个选项卡界面。我希望我的标签的每个部分都有一个 YouTube 视频。但是，例如，当我在选项卡 1 上的视频上单击播放，然后切换到选项卡 2 时，选项卡 1 上的视频仍会继续播放。请在此处查看完整代码：

http://jsfiddle.net/WwfFE/3/

对于如何在用户点击其他标签后停止视频提供任何帮助，我将不胜感激。

另外，当我在支持 Flash 的 android 手机上运行此程序时，视频似乎无法播放。知道我需要做什么来修复吗？还是我需要修复任何其他东西以使代码浏览器兼容？

【问题讨论】：

见：video won't stop when div is hidden。

嗨，Rob，非常感谢。一般来说，我对 javascript 真的很陌生 - 所以希望能深入了解如何在我的代码中准确地实现这一点。谢谢！

如果您是 JavaScript 新手，并且愿意学习它，我最好的建议是：Bury jQuery，并首先学习 basics of JavaScript。 对问题的回应：可以在此处找到更简单的 YouTube API 实现：Youtube iframe API: how do I control a iframe player that's already in the html?。

嗨，Rob，非常感谢。我一定会检查出来的。什么是埋葬 jQuery？那是一本书吗？我在哪里可以找到它。另外 - 我很感激这个链接......我会试着弄清楚，如果我遇到问题会告诉你。

“埋葬 jQuery”，我的意思是你最好不要使用jQuery，因为它不会教你如何编写 JavaScript 代码。 当你掌握了 jQuery 之后，你对 JavaScript 的了解还不是很多。

【参考方案1】：

这应该可行：

http://jsfiddle.net/WwfFE/5/

我只是将您所有的 URL 放在一个数组中。当用户决定离开选项卡时，我清除了iframe 的src，以便视频“停止”播放。

虽然你的currentTab 变量第一次仍然为空，所以我通过查看哪个<li> 的类设置为active 来检索它。从这个<li> 获取链接并将currentTab 变量设置为其href。

if (currentTab == '') 
   //Find current tab:
   currentTab = $('#tabs ul li.active').find('a').attr('href');


//Stop playing video:
if (currentTab != '')
   $('div#' + currentTab).find('iframe').attr('src', '');

当他回到任何标签时，你不应该忘记将src 设置回来，否则你的 iFrame 将是空的。这就是我在这里所做的：

var index = $(this).attr('id');
$('div#' + currentTab).find('iframe').attr('src', urls[index]);

此代码仍然可以优化以减少闪烁。一个简单的方法是在iframe 的load 触发器上设置一个函数。这样您就知道视频何时已成功设置，然后您想向用户显示标签。

【讨论】：

朱尔斯，你真是太棒了。非常感谢。我一直在花费数小时试图弄清楚这一点。非常非常非常感谢您的帮助。

欢迎您。我很高兴它有帮助。有时只需要一点点创造力... ;-)

嗨 Jules - 我希望一切都好。如果您不介意，我有一个关于此代码的后续问题。请看：***.com/questions/9169305

感谢出色的解决方案，只有 1 个问题：如何“非随机化”第一个显示的选项卡？页面加载时始终加载第一个选项卡和内容。

@yiyong 随机选项卡是通过以下方式生成的：var index = Math.floor($tabs.length * Math.random()); $tabs.eq(index).show(); 所以你可以把它替换为 $tabs.eq(0).show();顺便说一句，如果对您有帮助，请为答案投票。 :)

【参考方案2】：

在不使用 iframe 或视频 ID 的任何特殊定位的情况下，以下是我在选择其他标签时停止播放电影的方法。使用本机引导选项卡事件：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) 
    var iframe = $(e.relatedTarget.hash).find('iframe'); 
    var src = iframe.attr('src');
    iframe.attr('src', '');
    iframe.attr('src', src);
s);

【讨论】：

谢谢！超级有用且简单的 sn-p。