FlexSlider.js是款简单易用的轮播图jQuery插件，但没有提供支持HTML视频播放的参数（插件参数请参考《jquery幻灯片插件FlexSlider插件的详细设置参数》），如果直接使用html5标签video播放视频，会出现视频没有播放完就轮播到下一屏的问题，但是可以借助FlexSlider.js的回调函数实现支持视频播放。

html代码：

<div class="slides">
	<ul>
		<li>
			<video src="video.mp4" muted webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="allow" x5-video-orientation="portraint"></video>
		</li>
		<li>
			<img src="pic.jpg" />
		</li>
	</ul>
</div>

flexslider.js调用代码：

$(function(){
	$('.slides').flexslider({
	  animation: "fade",
	  slideshowSpeed: 6000,
	  directionNav: false,
	  controlNav: false,
	  start: function(slider){			
		if($('.flex-active-slide video').length > 0){
			slider.pause();
			$('.flex-active-slide video')[0].play();
			$('.flex-active-slide video')[0].onended = function(){
			 slider.play();
			} 
		}
	  },
	  after: function(slider){
		if($('.flex-active-slide video').length > 0){
			slider.pause();
			$('.flex-active-slide video')[0].play();
			$('.flex-active-slide video')[0].onended = function(){
			 slider.play();
			} 
		}
	  }
	});
});

主要代码意思：判断当前屏是否是视频，如果是，暂停flexslider轮播并播放视频，视频播放完之后，再开启flexslider轮播。

本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。