Question

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

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

我非常感谢用户点击其他标签后如何停止视频的任何帮助。

此外，当我在我的Android手机上启用此功能时，视频似乎无法播放。知道我需要做些什么来修复？或者我是否需要修复其他任何内容以使代码浏览器兼容？

Answer 1

这应该有效：

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

我只是将您的所有网址都放在一个数组中。当用户决定退出标签时，我会清除src的{{1}}，以便视频“停止”播放。

iframe变量第一次仍为空，所以我通过查看哪个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', '');，否则您的iFrame将为空。这就是我在这里做的事情：

src

此代码仍然可以优化，以减少闪烁。一种简单的方法是在var index = $(this).attr('id'); $('div#' + currentTab).find('iframe').attr('src', urls[index]);的{{1}}触发器上设置一个函数。通过这种方式，您可以了解视频何时成功设置，然后您希望向用户显示该标签。

Answer 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});

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

2 个答案: