Swiper 轮播 Video视频播放完毕后切换下一屏
html
<div class="swiper-container swiper-ban"> <div class="swiper-wrapper"> <div class="swiper-slide"> <video class="mVideo" id="mVideo" src="/static/default/images/2.mp4" muted controls="" webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow"></video> </div> <div class="swiper-slide"> <img src="/static/default/images/banner.jpg" width="100%"> </div> </div> <div class="swiper-button-prev prev-ban"></div> <div class="swiper-button-next next-ban"></div> </div>
js
<script>
$(function () {
var aSwiper = new Swiper('.swiper-ban',{
observer:true,
observeParents:true,
loop : false,
navigation: {
nextEl: ".next-ban",
prevEl: ".prev-ban",
},
on:{
init:function () {
this.emit('transitionStart');
},
transitionStart:function () {
//设置视频高度
var vheight = $('.swiper-ban .swiper-slide-next').find('img').height();
$('.swiper-ban #mVideo').css('height',vheight);
//判断是否是第一页
if(this.realIndex==0){
$('.swiper-ban .swiper-slide-active').children('video').get(0).play();//播放视频
this.autoplay.stop();
var vd = document.getElementById('mVideo');
vd.addEventListener('ended', function () {
aSwiper.slideNext();
aSwiper.params.autoplay.delay=5000;
aSwiper.params.autoplay.disableOnInteraction=false;
aSwiper.autoplay.start();
}, false);
}else{
document.getElementById('mVideo').currentTime=0;
$('.mVideo').get(0).pause();
this.params.autoplay.delay=5000;
this.params.autoplay.disableOnInteraction=false;
this.autoplay.start();
}
},
},
});
});
</script>