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插件实现的方法基本一样，事实上大部分轮播插件都可以使用该方法实现相同的效果。