jQuery - 带视频的选项卡...当我在选项卡之间切换时如何让视频停止播放？

Question

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

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

如果用户单击其他选项卡后如何停止视频，我将不胜感激。

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

Answer 1

这应该有效:

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

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

第一次你的currentTab不过变量仍然是空的，所以我通过查看 which <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]);

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