voide.js全屏播放视频插件

1、

导入公共样式 

<link rel="stylesheet" type="text/css" href="css/coom.css">

 

2、每个大的div需要加上page这个类名， 如 ：

<div class='end page' id='end' style='display:none;'></div>

 

3、引入zepot.js、video.js 和 Hp.js

 

4、创建VideoF对象

 

(function(){
	var media = new VideoF().init({
	    container : 'vlist',   	//容器 
	    src : 'ossweb-img/v.mp4', 	//视频路径
	    width : '100%',    //视频宽
	    height : '100%',   //视频高
	    speed : 1,         //视频播放速度(可忽略,主要用于在pc端调试)
	    mode : 'noborder',	//适配模式(两种视频模式，noboreder/showall, 默认是noborder)(可忽略)
	    bind : '#loading a',  //绑定按钮。即点击哪个按钮开始播放视频
	    begin : function(){	 //视频播放前执行 (可忽略)

	    },
	    playing : function(){   //视频可以播放时执行(可忽略)
	    	$('#vlist').show(); 
	      	$('#loading').hide();
	    },
	    over : function(){   //视频播放完毕时执行(可忽略)
	     	$('#end').show();
	    }
	 }); 
}());

 

 

案例地址 ：http://www.lcfbk.top/other/vdemo/