带有 vimeo 章节的多标签引导程序

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>

enter code here

对此有什么解决方案吗？ 谢谢。

Answer 1

为了实现此效果，您需要将引导选项卡触发的 events 和管理您的 Vimeo 视频上的 pause 和 play 效果结合起来。

1)引导标签事件

引导选项卡事件触发几个事件，来自他们的文档：

显示新标签时，事件按以下顺序触发：

• hide.bs.tab（在当前活动标签上）
• show.bs.tab（在要显示的选项卡上）
• hidden.bs.tab（在上一个活动选项卡上，与 hide.bs.tab 事件相同）
• shown.bs.tab（在新激活的刚刚显示的选项卡上，与 show.bs.tab 事件相同）

因此，为了捕获这些事件，您需要一个简单的 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 进行了测试。