jQuery-带有视频的标签...在标签之间切换时，如何停止播放视频? [英] jQuery - Tab with videos... how do I get videos to stop playing when I switch between tabs?

问题描述

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

I am new to jQuery, and I managed to create a tab interface. I want each section of my tab to have a YouTube video. However, when I click play on the video that is on tab 1 for example, and then switch to tab 2, the video on tab 1 still keeps on playing. Please see the entire code here:

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

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

I would greatly appreciate any help on how to stop the video once the user clicks on other tabs.

此外，当我在支持Flash的Android手机上运行该视频时，这些视频似乎无法播放.对我需要做的事情有任何想法吗?还是我需要修复其他任何东西以使代码浏览器兼容?

Also, when I run this on my Android, flash enabled phone, the videos don't seem to play. Any idea of what I need to do to fix? Or do I need to fix anything else to make code browser compatible?

推荐答案

这应该有效:

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

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

I simply put all your URL's in an array. When the user decides to leave the tab, I clear the src of the iframe so that the video "stops" playing.

但是第一次您的currentTab变量仍然为空，因此我通过查看哪个<li>的类设置为active来检索它.从这个<li>中获取链接，并将currentTab变量设置为其href.

The first time your currentTab variable is still empty though, so I retrieve it by looking at which <li> has its class set to active. From this <li> I take the link and set the currentTab variable to its 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将为空.这就是我在这里所做的:

When he gets back to any tab, you should not forget to set the src back though, else your iFrame will be empty. It's what I do here:

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

尽管可以减少闪烁，但仍可以优化此代码.一种简单的方法是在iframe的load触发器上设置一个功能.这样，您就可以知道何时成功设置了视频，然后您便希望向用户显示该标签.

This code can still be optimized though to reduce the flickering. An easy way to do this is by setting a function on the load trigger of the iframe's. This way you know when the video has been successfully set and it is then that you want to show the tab to the user.

这篇关于jQuery-带有视频的标签...在标签之间切换时，如何停止播放视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！