остановить видео, когда нажата другая вкладка

Question

Я использую вкладки начальной загрузки для переключения между видео на моем сайте, но у меня есть проблема. Когда я нажимаю на другую вкладку, видео на первой вкладке продолжает играть, поэтому я искал, и я мог сказать, что это как-то связано с javascript! да, я не знаю ничего о javascript только некоторые html, css, php и sql, но не javascript. поэтому, если кто-нибудь может мне помочь, я был бы очень признателен за помощь ((я использую много сайтов для видео-хостинга, таких как youtube, dailymotion, ok.ru и, если это не будет продолжаться), если кто-нибудь может мне помочь с каким-то кодом, я действительно буду понятно, что! вот мой код

<ul class="nav nav-tabs centered"> 
    <li class="active"><a data-toggle="tab" href="#video1">video 1</a></li> 
    <li><a data-toggle="tab" href="#video2">video 2</a></li> 
    <li><a data-toggle="tab" href="#video3">video 3</a></li> 
</ul> 

<div class="tab-content"> 
    <div id="video1" class="tab-pane fade in active" style="padding:5px"> 
     <div class="embed-responsive embed-responsive-16by9"> 
      <iframe class="embed-responsive-item" src="'.$rows['video1'].'" allowfullscreen></iframe> 
     </div> 
    </div> 
    <div id="video2" class="tab-pane fade" style="padding:5px"> 
     <div class="embed-responsive embed-responsive-16by9"> 
      <iframe class="embed-responsive-item" src="'.$rows['video2'].'" allowfullscreen></iframe> 
     </div> 
    </div> 
    <div id="video3" class="tab-pane fade" style="padding:5px"> 
     <div class="embed-responsive embed-responsive-16by9"> 
      <iframe class="embed-responsive-item" src="'.$rows['video3'].'" allowfullscreen></iframe> 
     </div> 
    </div> 
</div> 

заранее спасибо

Answer 1

Я думаю, что вы на самом деле не можете сделать это из-за "Same-origin policy".

в ясный, сайт A, ваш, не может использовать javascript/datas на веб-сайте B через iframe. Вы могли бы сделать это с помощью видеопроигрывателя, размещенного на ваш сервер (только сайт A в этом случае).

Answer 2

Вы можете использовать событие hidden.bs.tab, чтобы обработать код для приостановки видео. Это событие запускается, когда вкладка полностью скрыта.
бутстраповские Вкладки документация: here

JS:

$('a[data-toggle="tab"]').on('hidden.bs.tab', function (e) { 
    var video_element= $(e.target); 
    //Your code for pausing the video 
    });