开源软件协议：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=非全屏模式
功能：监听当前视频地址改变，当播放地址改变时会触发该函数