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));
}
}
});
})