swiper中添加video标签,在video的播放按钮显示时,轮播不能滚动

video没有显示播放按钮控件时就可以随意滑动,但是当播放按钮显示时,就不能滑动轮播

       我用的华为20s机型测试的有这个问题,其他机型测试的暂时没有发生这个问题,求解!  

<div class="swiper-container" id="swiper1">

    <div class="swiper-wrapper">
      <div class="swiper-slide" id="btn2" v-if="video !== ''">
      <--如果有视频插入视频,没有视频则不显示-->
        <video id="video1" controls="controls" autoplay poster="/images/w3html5.gif" muted>
          <source :src="video">
        </video>
      </div>
       <--插入图片-->
      <div class="swiper-slide" v-for='(item,key) in SwiperLIST' :key="key">
        <img :src="item">
      </div>
    </div>
  </div>~~~~

js:

// 轮播实例化
          Vue.nextTick(function () {
            myswiper = new Swiper('#swiper1', { 
              slidesPerView: 'auto',
              centeredSlides: true,
              spaceBetween: 30,
              observer: true,
              observeParents: true,
              pagination: {
                el: '.swiper-pagination',
              },
              on: {
                slideChangeTransitionStart: function () {
                  console.log(this.activeIndex);
                  vm.activeIndex = this.activeIndex + 1 //当前轮播页面下标值加1
                  if (vm.video !== '' && vm.activeIndex !== 1) {
                    var myVideo = document.getElementById("video1")
                    myVideo.pause();//当滑动轮播时暂停视频
                  }
                },
                sliderMove: function (event) {
                  console.log(JSON.stringify(event));
                }
              }
            });
          })
 



阅读 3.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题