複数のタブのブートストラップとvimeoのチャプター

Question

私はvimeoの4つのビデオをタブで複数の章に統合しようとしています。 （タブで1つのマルチチャプターのビデオ） しかし、私は次のタブに移動するとビデオが再生され続けます...

前のタブのビデオを停止する次のタブをクリックすると+アイテムのチャプターリスト（この新しいタブ上）をクリックすると、ビデオが再生されます。

マイコード：

<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--> 
 
     
 
    
 
\t <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> 
 
\t \t </div> 
 
\t </div> 
 
\t \t 
 
\t <div class="col-xs-8 feature wow fadeInLeft" data-wow-delay="0.3s"><!--FEATURES --> 
 
     
 
\t <div class="embed-responsive embed-responsive-16by9"> 
 
\t \t <iframe id="thevideo" class="embed-responsive-item" src="//player.vimeo.com/video/181964440?api=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
\t \t 
 
\t </div 
 
\t </div></div> 
 
     
 
</div><!--2 Blocs--> 
 
     
 
     
 
     
 
     </div><!--tab panel--> 
 
     
 
      
 
      
 
     <div role="tabpanel" class="tab-pane fade" id="quali"><!--tab panel--> 
 

 
     
 
     
 
     <div class="row"><!--2 Blocs--> 
 
     
 
    
 
\t <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> 
 
\t \t </div> 
 
\t </div> 
 
\t \t 
 
\t <div class="col-xs-8 feature wow fadeInLeft" data-wow-delay="0.3s"><!--FEATURES --> 
 
     
 
\t <div class="embed-responsive embed-responsive-16by9"> 
 
\t \t <iframe id="thevideo" class="embed-responsive-item" src="//player.vimeo.com/video/181964440?api=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
\t \t 
 
\t </div> 
 
\t </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

この効果を得るには、ブートストラップタブが起動し、pauseとplayという効果をあなたのVimeoビデオに適用して管理することが必要です。

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を使用して、これをテストしてみました。