Videojs+swiper が Taobao の商品詳細カルーセルを実現

<!-- スワイパー カルーセル-->
<div class="スワイパーコンテナ">
   <div class="スワイパーラッパー">
       <div class="スワイパースライド">
           <video id="video" style="width: 100%;height: 100%;" controls preload="none" poster="xxxx" class="video-js vjs-big-play-centered" >
            <ソース src="xxxx" type="video/mp4">
           </ビデオ>
       </div>
       <div class="swiper-slide"><img src="xxxx" alt=""></div>
        <div class="swiper-slide"><img src="xxxx" alt=""></div>
        <div class="swiper-slide"><img src="xxxx" alt=""></div>
        <div class="swiper-slide"><img src="xxxx" alt=""></div>
   </div>
   <!-- ポケベルが必要な場合 -->
   <div class="swiper-pagination"></div>
</div>

//新しいvideojsオブジェクトを作成する var player = videojs('video', {
     ミュート: true、
     コントロール: true、
     // ループ: true,
 });

 // スワイパーカルーセル var mySwiper = new Swiper ('.swiper-container', {
     direction:'horizo​​ntal', // スライドショーの方向。垂直にもできます loop: true, // ループ再生 autoplay:3000, // スライド自動切り替え時間 speed:2000, // スライドスライドアニメーション時間 height: 100,
     pagination: '.swiper-pagination', // ページネーターが必要な場合、つまり下の小さな点が必要な場合 autoplayDisableOnInteraction : false, // この方法では、スライドしてもタイマーはクリアされません offsetWidth: 0,
     observer:true, // 監視 // スワイパーがスライドから別のスライドに遷移するときに、ビデオの再生を停止します (ここでは swiper3 ですが、swiper4 は別の方法で記述されています)
     onSlideChangeStart: 関数(スワイパー){
          プレーヤーを一時停止します。
     }
 });


 //ビデオの再生中にカルーセルを停止しますplayer.on('play',function(){
     // コンソールログ(mySwiper)
     mySwiper.stopAutoplay()
 });

 // ビデオが一時停止されると、カルーセルは続行されます player.on('pause', function(){
     mySwiper.startAutoplay()
 });