Swiper幻灯片插件实现video视频播放结束再继续轮播的代码
使用Swiper.js轮播图插件实现当前活动块元素有video视频时swiper停止自动切换,监听视频播放结束再继续自动切换到下一个的效果。实现该效果需要用到swiper事件有slideChangeTransitionEnd(swiper)
、用到swiper的方法有mySwiper.autoplay.stop()
、mySwiper.autoplay.start()
。
实现代码
HTML代码
<div class="swiper" id="slides"> <div class="swiper-wrapper"> <div class="swiper-slide"> <video id="video1" src="upload/video.mp4" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="allow" x5-video-orientation="portraint" muted> </video> </div> <div class="swiper-slide">slider2</div> <div class="swiper-slide"> <video id="video3" src="upload/video.mp4" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="allow" x5-video-orientation="portraint" muted> </video> </div> </div> </div>
JS代码
var slides = new Swiper('#slides', { autoplay: true, on: { slideChangeTransitionEnd: function(){ if($('#slides .swiper-slide-active video').length > 0){ var _this = this; _this.autoplay.stop(); var _videoID = $('#slides .swiper-slide-active video').attr('id'); var _videoObj = document.getElementById(_videoID); _videoObj.play(); _videoObj.addEventListener('ended', function(){ _this.slideNext(); _this.autoplay.start(); },false); } }, } }); if($('#slides .swiper-slide-active video').length > 0){ slides.autoplay.stop(); var _videoID = $('#slides .swiper-slide-active video').attr('id'); var _videoObj = document.getElementById(_videoID); _videoObj.play(); _videoObj.addEventListener('ended', function(){ slides.slideNext(); slides.autoplay.start(); },false); }
PS:和前面SuperSlide.js插件实现的方法基本一样,事实上大部分轮播插件都可以使用该方法实现相同的效果。