开源软件协议:Mozilla Public License, version 2.0(MPL 2.0)
MPL 2.0协议英文(原文,正本)查看地址:
https://www.mozilla.org/en-US/MPL/2.0/
MPL 2.0协议中文(翻译)查看地址:
Mozilla_Public_License_2.0.txt
优先使用html5播放器播放,在不支持html5的浏览器或不支持特定视频格式(比如:m3u8,rtmp)的浏览上使用flashplayer
在pc端和移动端使用统一风格的界面,控制功能和监听功能在pc端和移动端都是同样使用。在html5和flashplayer里也使用统一的控制代码及监听代码
浏览器 | 支持的视频格式 | |
---|---|---|
PC端 | 移动端 | |
Chrome | MP4,M3U8,FLV,RTMP协议 | MP4,WebM,M3U8 |
Firefox | MP4,M3U8,FLV,RTMP协议 | MP4,WebM,M3U8 |
Internet Explorer | MP4,M3U8,FLV,RTMP协议 | MP4,M3U8 |
移动端平台 | 支持的视频格式 |
---|---|
Android | MP4,M3U8 |
iOS | MP4,M3U8 |
Safari | MP4,M3U8 |
建议点播优先使用mp4,其次使用m3u8。直播优先使用m3u8,这样可以兼容各平台。尽量不要使用flv来做点播,也不要使用rtmp协议来做直播,移动端不支持flv格式的点播放,也不支持rtmp协议的直播
<div id="video" style="width:600px;height:400px;"></div><!--播放器容器,需要自行设置尺寸--> <script type="text/javascript"> var videoObject = { container: '#video', //容器的ID,如果获到容器定义的是ID则需要增加#,如果是class,则不需要添加或添加. variable: 'player',//调用函数名称,该属性主要用于flashplayer发送监听内容时使用,如call('player.time',10) volume: 0.6, //默认音量,范围是0-1 poster: '', //封面图片地址 autoplay: true, //是否自动播放,默认true=自动播放,false=默认暂停状态 loop: false, //是否循环播放,默认false=不需要,true=需要 live: false, //是否是直播,默认false=点播放,true=直播 loaded: 'loadedHandler', //当播放器加载后执行的函数 seek: 0, //默认需要跳转的时间 drag: 'start', //在flashplayer情况下是否需要支持按关键帧拖动,不需要留空,需要请填写拖动时请求的属性,本例中使用start,如果需要强制按时间点拖动则增加前缀time_,本例中即time_start,如果需要强制按关键帧进行拖动,则前缀是frames_,本例中即:frames_start front: '', //前一集按钮点击触发函数,即点击前一集时调用的函数名称,默认为空 next: '', //下一集按钮点击触发函数,即点击下一集时调用的函数名称,默认为空 flashplayer:false,//强制使用flashplayer html5m3u8:false,//是否使用hls,默认不选择,如果此属性设置成true,则不能设置flashplayer:true, track:[ { kind:'subtitles', label:'English', srclang:'en', src:'res/zm/cs.vtt', default:true }, { kind:'subtitles', label:'中文', srclang:'zn', src:'res/zm/cs2.vtt', default:false }, ],//系统内置字幕轨道,目前大部分浏览器都不支持 chtrack:{ src:'srt.srt', charset:'utf-8' },//chplayer使用的字幕文件及编码 preview:{ src:['screenshot/mydream_en1800_1010_01.jpg','screenshot/mydream_en1800_1010_02.jpg'], scale:2 },//预览图片地址数组,src=图片地址数组,scale=图片截取时间间隔,单位:秒 prompt:[ { words:'提示点文字01', time:16 }, { words:'提示点文字02', time:60 } ],//提示点,words=提示点的内容,time=提示点对应的时间 debug:false,//是否开启调试模式,默认false,不开启 video: [ ['examples01.mp4', 'video/mp4', '中文标清', 0], ['examples02.mp4', 'video/mp4', '中文高清', 10], ['examples03.mp4', 'video/mp4', '英文高清', 0], ['examples04.mp4', 'video/mp4', '英文超清', 0] ]//视频地址数组。视频地址可以分多种形式,具体在下面会有详细介绍 }; var player = new chplayer(videoObject);//创建一个播放器函数并附给player变量,(player需要和 var videoObject里的属性variable相同) </script>
播放器初始化变量(本例中指:videoObject)里的属性除:container,variable,video为必需设置外,其它属性可以省略。该变量类型为“对象”,所以需要注意各属性用“,”号隔开,但最后一个属性结尾不能有“,”
设置视频地址指设置上面代码中的var videoObject={}变量中的video属性值,该值可以分成以下几种类型,1:普通文本型,2:普通数组型,3:对象型,4:二维数组-数组型,5:二维数组-对象型,6:ajax型
1:普通文本型,该方式适合调用单个视频的形式,代码示例如下:
video:'examples.mp4'
2:普通数组型,该方式适合调用单个视频并且有多个格式的形式,代码示例如下:
video:['examples.mp4','video/mp4','examples.webm','video/webm']
3:对象型,该方式主要用来不直接显示视频地址时使用,需要注意的是不能跨域调用,代码示例如下:
video:{ url:'examples.mp4', type:'video/mp4' }
4:二维数组-数组型,该方式适合调用有不同清晰度的形式,并且也支持不同格式的形式,代码示例如下:
video: [ ['examples01.mp4', 'video/mp4', '中文标清', 0], ['examples02.mp4', 'video/mp4', '中文高清', 10], ['examples03.mp4', 'video/mp4', '英文高清', 0], ['examples04.mp4', 'video/mp4', '英文超清', 0] ]
如果其中不同清晰度有不同格式的视频,则调用代码如下:
video: [ ['examples01.mp4', 'video/mp4', '标清', 5], ['examples01.webm', 'video/webm', '标清', 0], ['examples01.ogg', 'video/ogg', '标清', 0], ['examples02.mp4', 'video/mp4', '高清', 10], ['examples03.mp4', 'video/mp4', '高清', 0], ['examples04.mp4', 'video/mp4', '超清', 0] ]
数组里各值的意思是:['视频地址','视频类型','清晰度名称,可以为空',权重]
视频地址:即视频地址,可以是mp4,flv,f4v,m3u8以及rtmp协议
视频类型:只有当有类型时才需要填写,如果是m3u8或rtmp协议时留空
清晰度名称:注意要么都要有,要么全留空
权重:即在相等条件下优先播放顺序,数值越大,权重超高
5:二维数组-对象型,该方式适合调用有不同清晰度的形式,并且也支持不同格式的形式,代码示例如下:
video: [ { definition: '标清', list: [ { url: 'examples01.mp4', type: 'video/mp4', weight:5 }, { url: 'examples01.webm', type: 'video/webm', weight:0 } ] }, { definition: '高清', list: [ { url: 'examples02.mp4', type: 'video/mp4', weight:0 } ] } ]
该类型是有一些对象变量组成的二维数组,各个对象里定义了不同的属性,definition是清晰度名称,list是视频数组,也是一个由对象组成的二维数组,各对象里定义视频地址:url,视频类型:type,权重:weight(整数型,数字越大,权重越高)
6:ajax型,该方式主要用来不直接显示视频地址时使用,需要注意的是不能跨域调用,代码示例如下:
video:{ method : 'get',//请求类型 dataType:'json',//返回的数据类型 url:'examples.json'//请求地址 }
examples.json里的数据形式支持:2:普通数组型,3:对象型,4:二维数组-数组型,5:二维数组-对象型,比如可以输出
video:['examples.mp4','video/mp4','examples.webm','video/webm']
功能是控制播放器进行指定动作,举例说明,假设调用播放器是按上面的形式:var player=new chplayer();则控制播放器播放使用:player.play();
功能:视频继续播放
功能:视频暂停
功能:在继续播放和暂停之间进行切换
功能:跳转到指定时间(秒)
功能:设置音量:范围是0-1
功能:获取视频元数据,该函数返回一个对象,各属性如下:
总时间:getMetaDate()['duration'] 秒,
音量: getMetaDate()['volume'](范围0-1),
播放器的宽度:getMetaDate()['width']px,
播放器的高度:getMetaDate()['height']px,
视频的实际宽度:getMetaDate()['videoWidth']px,
视频的实际高度:getMetaDate()['videoHeight']px,
是否暂停状态:getMetaDate()['paused'];
清除视频播放器
切换新视频,videoObject即初始化设置
增加一个元件,该元件可以是图片+文字的形式,可以自定义背景,透明度等属性。 下面是一个示例
var attribute = { list: [//list=定义元素列表 { type:'image',//定义元素类型:只有二种类型,image=使用图片,text=文本 url:'screenshot/logo.png',//图片地址 radius: 30,//图片圆角弧度 width:30,//定义图片宽,必需要定义 height:30,//定义图片高,必需要定义 alpha:0.9,//图片透明度(0-1) marginLeft:10,//图片离左边的距离 marginRight:10,//图片离右边的距离 marginTop:10,//图片离上边的距离 marginBottom:10//图片离下边的距离 }, { type: 'text',//说明是文本 text: '演示弹幕内容,弹幕只支持普通文本,不支持HTML',//文本内容 fontColor: '#FFFFFF',//文本颜色 fontSize: 14,//文本字体大小,单位:px fontFamily: '"Microsoft YaHei", YaHei, "微软雅黑", SimHei,"\5FAE\8F6F\96C5\9ED1", "黑体",Arial',//文本字体 lineHeight:30,//文字行距 alpha: 1,//文本透明度(0-1) paddingLeft:10,//文本内左边距离 paddingRight:10,//文本内右边距离 paddingTop:0,//文本内上边的距离 paddingBottom:0,//文本内下边的距离 marginLeft:0,//文本离左边的距离 marginRight:0,//文本离右边的距离 marginTop:10,//文本离上边的距离 marginBottom:0,//文本离下边的距离 backgroundColor:'#000000',//文本的背景颜色 backAlpha:0.5,//文本的背景透明度(0-1) backRadius:30//文本的背景圆角弧度 } ], x:10,//元件x轴坐标,注意,如果定义了position就没有必要定义x,y的值了,x,y支持数字和百分比,使用百分比时请使用单引号,比如'50%' y: 10,//元件y轴坐标 //position:[1,1],//位置[x轴对齐方式(0=左,1=中,2=右),y轴对齐方式(0=上,1=中,2=下),x轴偏移量(不填写或null则自动判断,第一个值为0=紧贴左边,1=中间对齐,2=贴合右边),y轴偏移量(不填写或null则自动判断,0=紧贴上方,1=中间对齐,2=紧贴下方)] alpha:1,//元件的透明度 //backgroundColor:'#000000',//元件的背景色 backAlpha:0.5,//元件的背景透明度(0-1) backRadius:60//元件的背景圆角弧度 } var el=player.addElement(attribute);//el是返回元件本身,可以用于其它用户,比如缓动
功能:获取元件的属性,属性包含宽:width,高:height,横坐标:x,纵坐标:y,比如获取上方el的属性,示例如下
var attribute=player.getElement(el);
功能:删除元件,示例如下:
deleteElement(el);
功能:元件缓动函数,传递的是一个对象,说明如下:
var obj = { element: el,//缓动对象,比如上方新加的el parameter: 'x',//缓动属性,这里只有三种,x,y,alpha,分别是x轴方向缓动,y轴方向缓动,透明度缓动 static:true,//是否禁止其它属性,true=是,即当x(y)(alpha)变化时,y(x)(x,y)在播放器尺寸变化时不允许变化 effect: 'None.easeOut',//缓动效果类型 start: null,//开始时的值,没有设置成null end: 0,//缓动结束时的值,该值必需有 speed: 10,//缓动时长 overStop:true,//鼠标经过时是否暂停缓动,默认false pauseStop:true,//视频暂停时是否暂停缓,默认false callBack:'callBackFun'//缓动结束调用的函数名称,没有可以设置成null,如果存在,则返回弹幕的编号,callBackFun(animateId); }; var danmuAnimate=player.animate(obj);
有关于缓动的类型(effect属性)值的详细效果说明可以查看: html5-video环境缓动, flashplayer环境缓动
功能:(继续)播放缓动元件,attribute=缓动对象,可以留空,则表示播放所有缓动动画,比如播放上方设置的缓动:
danmuAnimate(danmuAnimate);
功能:暂停元件的缓动效果,attribute=缓动对象,可以留空,则表示暂停所有缓动动画,比如暂停上方设置的缓动:
animatePause(danmuAnimate);
功能:监听函数,event是事件名称,function是接受的函数,具体可监听的事件请查看 监听函数列表
功能:删除监听函数,event是事件名称,function是接受的函数
功能是监听播放器的状态的改变,注意,监听函数必需在确保播放器已加载时才可注册监听,怎么确定播放器已加载,调用代码示例里初始化变量里的loaded属性设置 监听函数是addListener,这个函数的详细说明请查看 addListener,当不需要监听时则可以删除已有的监听:removeListener
<div id="video" style="width:600px;height:400px;"></div><!--播放器容器,需要自行设置尺寸--> <script type="text/javascript"> var videoObject = { ... loaded: 'loadedHandler', ... }; var player = new chplayer(videoObject); function loadedHandler(){ //播放器加载成功,可以注册监听 player.addListener('error', errorHandler); //监听视频加载出错 player.addListener('timeupdate', timeUpdateHandler); //监听播放时间 } function errorHandler(){ alert('加载失败了'); } function timeUpdateHandler() { console.log('当前播放时间(秒):' + player.time); } </script>
功能:监听视频加载出错,视频加载出错时会触发该状态
功能:监听元数据,当播放器加载到元数据时触发
功能:监听视频播放状态,当用户点击播放按钮或单击视频播放或用js控制播放时会触发
功能:监听视频暂停,当用户点击暂停按钮或单击视频暂停或用js控制暂停时会触发
功能:监听播放时间的改变,获取当前播放时间的属性是:time,即player.time
功能:监听音量改变,获取当前音量的属性是:volume,即player.volume
功能:监听seek中状态,用户点击进度栏或拖动进度按钮或js调用seek(time:Int)进行跳转时间播放时会立即触发该状态。
功能:监听seek结束,seek结束正常播放时会立即触发该状态
功能:监听是否全屏状态,获取是否全屏的属性是:full,即player.full,true=全屏,false=非全屏模式
功能:监听当前视频地址改变,当播放地址改变时会触发该函数