jquery - 带有 vimeo 章节的多标签 Bootstrap

Question

我正在尝试通过标签将 vimeo 的四个视频集成到多个章节中。 (一个多章节的视频按标签) 但是当我移动到下一个选项卡时，视频继续播放......

我希望当我单击下一个选项卡时停止上一个选项卡的视频 + 当我单击项目章节列表(在这个新选项卡上)时播放视频。

我的代码:

 <section id="be" class="pad-xl">
      <div class="container"><!--tab contaire--> 
      
      
<ul id="tabs" class="nav nav-tabs nav-justified" role="tablist">
  <li  class="active"><a href="#plani" data-toggle="tab">La Planification</a></li>
  <li ><a href="#quali" data-toggle="tab">La qualité</a></li>
  <li ><a href="#prod" data-toggle="tab">La production</a></li>
  <li ><a href="#config" data-toggle="tab">Le configurateur</a></li>
</ul>
       
       <div class="tab-content"><!--tab content--> 
      
      
      
      
      
      
      
      
      
       <div role="tabpanel" class="tab-pane fade in active" id="plani"><!--tab panel--> 

      
        
        <div class="row"><!--2 Blocs--> 
        
 
	<div class="col-xs-4 feature wow fadeInLeft" data-wow-delay="0.3s"><!--FEATURES --> 
        
        <div class="list-group">
 
    <a href="#" data-seek="53.6" class="timecode list-group-item active">Introduction<span class="badge">14</span></a>
  
    <a href="#" data-seek="53.6" class="timecode list-group-item list-group-item-action">Blabla</a>
    <a href="#" data-seek="53.6" class="timecode list-group-item list-group-item-action">Blabla2</a>
    <a href="#" data-seek="53.6" class="timecode list-group-item list-group-item-action">Blabla3</a>  
    <a href="#" data-seek="53.6" class="timecode list-group-item list-group-item-action">Blabla4</a> 
    <a href="#" data-seek="53.6" class="timecode list-group-item list-group-item-action">5</a> 
		</div>
	</div>
		 
	<div class="col-xs-8 feature wow fadeInLeft" data-wow-delay="0.3s"><!--FEATURES --> 
        
	<div class="embed-responsive embed-responsive-16by9">
		 <iframe id="thevideo" class="embed-responsive-item" src="//player.vimeo.com/video/181964440?api=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
		
	</div
	</div></div>
        
 </div><!--2 Blocs--> 
        
        
        
        </div><!--tab panel--> 
        
         
         
         <div role="tabpanel" class="tab-pane fade" id="quali"><!--tab panel--> 

      
        
        <div class="row"><!--2 Blocs--> 
        
 
	<div class="col-xs-4 feature wow fadeInLeft" data-wow-delay="0.3s"><!--FEATURES --> 
        
        <div class="list-group">
 
    <a href="#" data-seek="53.6" class="timecode list-group-item active">Introduction<span class="badge">14</span></a>
  
    <a href="#" data-seek="53.6" class="timecode list-group-item list-group-item-action">PIC & Plan d’approvisionnement</a>
    <a href="#" data-seek="53.6" class="timecode list-group-item list-group-item-action">PDP</a>
    <a href="#" data-seek="53.6" class="timecode list-group-item list-group-item-action">Plan de charges</a>  
    <a href="#" data-seek="53.6" class="timecode list-group-item list-group-item-action">L’ordonnancement</a> 
    <a href="#" data-seek="53.6" class="timecode list-group-item list-group-item-action">Autres fonctionnalités Planification</a> 
		</div>
	</div>
		 
	<div class="col-xs-8 feature wow fadeInLeft" data-wow-delay="0.3s"><!--FEATURES --> 
        
	<div class="embed-responsive embed-responsive-16by9">
		 <iframe id="thevideo" class="embed-responsive-item" src="//player.vimeo.com/video/181964440?api=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
		
	</div>
	</div>
        
 </div><!--2 Blocs--> 
</div><!--tab panel--> 

   

</div>
<script>
jQuery(function ($) {
    var iframe = document.getElementById('thevideo');
    var player = $f(iframe);
    $('.timecode').on('click', function (e) {
        e.preventDefault();
        var seekVal = $(this).attr('data-seek');
        player.api('seekTo', seekVal);
    });
});
//@ sourceURL=pen.js
</script>
</section>

在这里输入代码

有什么解决办法吗？ 谢谢。

Answer 1

为了实现这种效果，您需要将引导选项卡触发的事件与管理pause和play效果结合起来对您的Vimeo视频.

1) Bootstrap 选项卡事件

Bootstrap tabs 事件触发了几个事件，来自他们的文档:

When showing a new tab, the events fire in the following order:

• hide.bs.tab (on the current active tab)
• show.bs.tab (on the to-be-shown tab)
• hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
• shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

因此，为了捕获这些事件，您需要一个简单的 jQuery:

JS:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // You have access to both tabs
  var previousActiveTabId = $(e.relatedTarget).attr('href');
  var newlyActivatedTabId = $(e.target).attr('href');

  // More stuff below
}

2) 现在您有了将要激活的选项卡和前一个选项卡，用于停止/播放视频我建议您使用 Vimeos's JavaScript SDK其中包含几个实用程序。但是为了你的缘故，你可以做这样的事情:

增强之前的JS:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // You have access to both tabs
  var previousActiveTabId = $(e.relatedTarget).attr('href');
  var newlyActivatedTabId = $(e.target).attr('href');

    // Now you can stop the video like this
    var playerToPause = new Vimeo.Player($(previousActiveTabId).find('iframe')[0]);
  playerToPause.pause();

  var playerToPlay = new Vimeo.Player($(newlyActivatedTabId).find('iframe')[0]);
  playerToPlay.play();

});

这应该可以解决问题，我已经使用 This Fiddle, check it out and see if it helps you 对此进行了测试.