查看: 2455|回复: 1
打印 上一主题 下一主题

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

[复制链接]

该用户从未签到

1

主题

2

帖子

22

积分

新手上路

Rank: 1

积分
22
跳转到指定楼层
楼主
发表于 2021-7-6 10:43:59 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
请教大神,当左右滑动时,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视频,如何暂停播放?滑回到原来位置时,才播放。


分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

  • TA的每日心情
    开心
    2023-8-12 09:00
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    2

    帖子

    5

    积分

    新手上路

    Rank: 1

    积分
    5
    沙发
    发表于 2023-8-12 09:01:49 | 只看该作者
    同问啊,我也想要这个效果。
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2024-11-23 18:16 , Processed in 0.057913 second(s), 27 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表