abin 发表于 2021-7-6 10:43:59

滑动时,video视频,暂停播放,如何实现?

请教大神,当左右滑动时,video视频,如何暂停播放?滑回到原来位置时,才播放。
<!-- Swiper -->
<div class="swiper-container gallery-top2">
    <div class="swiper-wrapper">
            
      <div class="swiper-slide">
            <img src="img/play2.png" class="play2" data="1">
            <img src="img/play.png" class="stop2"data="1">
            <img src="img/music.png" class="music1" data="1">
            <img src="img/music2.png" class="music2" data="1">
<!--视频-->
   <video id="video1" class="video-js" >
            <source src="img/mp3.mp4" type="video/mp4">
         </video>
      </div>

      <div class="swiper-slide"><img src="img/gg2.jpg" class="open_show"></div>
      <div class="swiper-slide"><img src="img/gg3.jpg" class="open_show"></div>
      <div class="swiper-slide"><img src="img/gg4.jpg" class="open_show"></div>
      <div class="swiper-slide"><img src="img/gg5.jpg" class="open_show"></div>
      <div class="swiper-slide"><img src="img/gg6.jpg" class="open_show"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

                        </div>
                        <!---->
                        <div class="right swiper-container gallery-thumbs2">
    <ul class="swiper-wrapper">
                <li class="swiper-slide active"><img src="img/gg1.jpg"><span>视频</span></li>
      <li class="swiper-slide"><img src="img/gg2.jpg"></li>
      <li class="swiper-slide"><img src="img/gg3.jpg"></li>
      <li class="swiper-slide"><img src="img/gg4.jpg"></li>
      <li class="swiper-slide"><img src="img/gg5.jpg"></li>
      <li class="swiper-slide"><img src="img/gg6.jpg"></li>
                              </ul>
                              
                        </div>

                </div>
               
<script>
      var galleryThumbs = new Swiper('.gallery-thumbs2', {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
          direction: 'vertical',
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
    });
    var galleryTop = new Swiper('.gallery-top2', {
      spaceBetween: 10,
    pagination: {
      el: '.swiper-pagination',
      type: 'fraction',
      },
      thumbs: {
      swiper: galleryThumbs
      }
    });

</script>      
                <!---->

请教大神,当左右滑动时,video视频,如何暂停播放?滑回到原来位置时,才播放。


kouyuxin 发表于 2023-8-12 09:01:49

同问啊,我也想要这个效果。
页: [1]
查看完整版本: 滑动时,video视频,暂停播放,如何实现?