当前位置:首页 > 网络技术 > Flexslider轮播图插件支持HTML5视频播放代码

Flexslider轮播图插件支持HTML5视频播放代码

longge2021-12-17 20:29:32网络技术165

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轮播。

免责声明
本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。#转载请注明出处!
  • 随机文章
  • 热门文章
  • 热评文章