Videojs+swiper realizes Taobao product details carousel

<!-- swiper carousel-->
<div class="swiper-container">
   <div class="swiper-wrapper">
       <div class="swiper-slide">
           <video id="video" style="width: 100%;height: 100%;" controls preload="none" poster="xxxx" class="video-js vjs-big-play-centered" >
            <source src="xxxx" type="video/mp4">
           </video>
       </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>
   <!-- If you need a pager -->
   <div class="swiper-pagination"></div>
</div>

//Create a new videojs object var player = videojs('video', {
     muted: true,
     controls: true,
     // loop: true,
 });

 // swiper carousel var mySwiper = new Swiper ('.swiper-container', {
     direction:'horizontal', // The direction of the slideshow, can also be vertical loop: true, // loop play autoplay:3000, // slide automatic switching time speed:2000, // slide sliding animation time height: 100,
     pagination: '.swiper-pagination', // If you need a paginator, that is, the small dot below autoplayDisableOnInteraction : false, // In this way, even if we slide, the timer will not be cleared offsetWidth: 0,
     observer:true, //Monitor // When swiper transitions from one slide to another, execute: stop video playback (here is swiper3, swiper4 is written differently)
     onSlideChangeStart: function(swiper){
          player.pause();
     }
 });


 //Stop the carousel while the video is playingplayer.on('play',function(){
     // console.log(mySwiper)
     mySwiper.stopAutoplay()
 });

 // When the video is paused, the carousel continues player.on('pause', function(){
     mySwiper.startAutoplay()
 });