Videojs+Swiper realisiert Taobao-Produktdetailkarussell

<!-- Swiper-Karussell-->
<div Klasse="Swiper-Container">
   <div Klasse="swiper-wrapper">
       <div Klasse="swiper-slide">
           <video id="video" style="Breite: 100%;Höhe: 100%;" steuert Vorladen="keine" poster="xxxx" class="video-js vjs-big-play-centered" >
            <Quelle src="xxxx" Typ="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>
   <!-- Wenn Sie einen Pager benötigen -->
   <div Klasse="swiper-pagination"></div>
</div>

//Erstelle ein neues Videojs-Objekt var player = videojs('video', {
     stummgeschaltet: wahr,
     Kontrollen: wahr,
     // Schleife: true,
 });

 // Swiper-Karussell var mySwiper = neuer Swiper ('.swiper-container', {
     direction:'horizontal', // Die Richtung der Diashow, kann auch vertikal sein loop: true, // Schleife abspielen autoplay:3000, // Zeit für automatisches Umschalten der Folie speed:2000, // Zeit für die Gleitanimation der Folie height: 100,
     Paginierung: '.swiper-pagination', // Wenn Sie einen Paginator benötigen, also den kleinen Punkt unter autoplayDisableOnInteraction: false, // Auf diese Weise wird der Timer nicht gelöscht, selbst wenn wir schieben offsetWidth: 0,
     observer:true, //Monitor // Wenn swiper von einer Folie zur nächsten wechselt, ausführen: Videowiedergabe stoppen (hier ist swiper3, swiper4 wird anders geschrieben)
     beimStartenderFolienänderung: Funktion(Swiper){
          Spieler.Pause();
     }
 });


 //Stoppen Sie das Karussell, während das Video abgespielt wirdplayer.on('play',function(){
     // console.log(meinSwiper)
     mySwiper.stopAutoplay()
 });

 // Wenn das Video angehalten wird, wird das Karussell fortgesetzt player.on('pause', function(){
     mySwiper.startAutoplay()
 });