jQuery - вкладка с видео ... как заставить видео перестать воспроизводиться при переключении между вкладками?

Question

Я новичок в jQuery, и мне удалось создать интерфейс вкладки. Я хочу, чтобы в каждом разделе моей вкладки было видео на YouTube. Однако, когда я нажимаю кнопку воспроизведения на видео, которое находится на вкладке 1, например, а затем переключаюсь на вкладку 2, видео на вкладке 1 продолжает воспроизводиться. Пожалуйста, смотрите весь код здесь:

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

Буду очень признателен за любую помощь в том, как остановить видео, когда пользователь нажимает на другие вкладки.

Кроме того, когда я запускаю это на своем Android-телефоне с поддержкой флеш-памяти, видео не воспроизводится. Любая идея, что мне нужно сделать, чтобы исправить? Или мне нужно что-то еще исправить, чтобы сделать браузер кода совместимым?

Answer 1

Это должно работать:

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

Я просто помещаю все ваши URL в массив.Когда пользователь решает покинуть вкладку, я очищаю src от 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', '');

Когда он возвращается на любую вкладку, вы не должны забывать установить src обратнохотя, иначе ваш iFrame будет пустым.Это то, что я делаю здесь:

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

Этот код все еще можно оптимизировать, хотя для уменьшения мерцания.Самый простой способ сделать это - установить функцию на load триггер iframe.Таким образом, вы узнаете, когда видео было успешно установлено, и именно тогда вы хотите показать вкладку пользователю.

Answer 2

Без использования специального таргетинга на iframe или идентификаторы видео, вот как я могу остановить воспроизведение любого фильма при выборе другой вкладки. Использует собственные события вкладки начальной загрузки:

$('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});