JS-控制播放器
说明
控制分成两个部分内容：
1：对播放器进行控制，
2：对元件进行控制，该功能主要用于在播放器内添加元件及对元件进行缓动。
对播放器进行控制时需要确保播放器已成功加载，并且有些控制操作必需等到视频的元数据信息加载成功。
播放器控制示例（控制音量）
<div class="video"></div>
<script>
var videoObject = {
container: '.video', //容器的ID或className
volume:0.8,//默认音量为0.8
video:'temp.mp4'
};
var player=new ckplayer(videoObject);
player.volume(0.5);//修改音量为0.5
</script>以上示例是一个修改播放器音量的示例
观看示例视频
视频容器
播放器控制API列表
| play() |
| 功能说明： |
播放 |
| 函数说明： |
播放视频
示例
player.play() |
| pause() |
| 功能说明： |
暂停 |
| 函数说明： |
暂停播放视频
示例：
player.pause() |
| playOrPause() |
| 功能说明： |
播放/暂停 |
| 函数说明： |
在播放和暂停两个状态之间切换 |
| muted() |
| 功能说明： |
静音 |
| 函数说明： |
调整播放器音量为静音状态 |
| exitMuted() |
| 功能说明： |
取消静音 |
| 函数说明： |
恢复音量 |
| volume(num) |
| 功能说明： |
修改音量/获取音量 |
| 函数说明： |
num指音量，类型是：Number，范围是：0-1，如果不设置，则返回当前音量
示例：
player.volume();//获取播放器音量
player.volume(0.5);//设置播放器音量为0.5 |
| seek(time) |
| 功能说明： |
跳转指定时间点 |
| 函数说明： |
time指时间点，类型是：Int，单位：秒 |
| loop(bool) |
| 功能说明： |
是否循环播放 |
| 函数说明： |
bool:true=循环播放，false=非循环播放，为空时获取当前的循环状态
示例：
player.loop(true);
player.loop(false);
var loop=player.loop() |
| addListener(name,callback) |
| 功能说明： |
添加播放器监听事件 |
| 函数说明： |
name=事件名称，callback=处理函数
示例：
var callBack=function(){console.log('监听到播放')};
player.addListener('play',callBack);//添加监听事件
|
| removeListener(name,callback) |
| 功能说明： |
删除监听事件 |
| 函数说明： |
name=事件名称，callback=处理函数
示例：
var callBack=function(){console.log('监听到播放')};
player.addListener('play',callBack);//添加监听事件
player.removeListener('play',callBack);//删除上面添加的监听
|
| vars(obj[.value]) |
| 功能说明： |
修改初始化变量 |
| 函数说明： |
示例：
player.vars('timeScheduleAdjust',0);//禁止鼠标拖动进度
|
| full() |
| 功能说明： |
全屏 |
| 函数说明： |
让播放器全屏 |
| exitFull() |
| 功能说明： |
退出全屏 |
| 函数说明： |
让播放器退出全屏 |
| fullOrExit() |
| 功能说明： |
在全屏和退出全屏两个状态之间进行切换 |
| webFull() |
| 功能说明： |
页面全屏 |
| 函数说明： |
使播放器在页面内全屏 |
| exitWebFull() |
| 功能说明： |
退出页面全屏 |
| 函数说明： |
使播放器退出页面全屏 |
| theatre() |
| 功能说明： |
使播放器处于剧场模式 |
| exitTheatre() |
| 功能说明： |
退出剧场模式 |
| fastBack(num) |
| 功能说明： |
快退 |
| 函数说明： |
num=快退的秒数 |
| fastNext(num) |
| 功能说明： |
快进 |
| 函数说明： |
num=快进的秒数 |
| bar(bool) |
| 功能说明： |
显示/隐藏底部(顶部)控制栏 |
| 函数说明： |
bool:true=显示控制栏，false=隐藏控制栏 |
| rightBar(bool) |
| 功能说明： |
显示/隐藏右边控制栏 |
| 函数说明： |
bool:true=显示控制栏，false=隐藏控制栏 |
| screenshot() |
| 功能说明： |
截图并返回图片的base64 |
| closeScreenshot(bool) |
| 功能说明： |
关闭截图窗口 |
| smallWindows(bool) |
| 功能说明： |
开启小窗口功能 |
| 函数说明： |
bool:true=开启小窗口，false=关闭小窗口功能 |
| message(str) |
| 功能说明： |
在播放器中显示一个消息 |
| 函数说明： |
str=显示的消息文本 |
| closeFrontAd() |
| 功能说明： |
跳过贴片广告 |
| videoWidth() |
| 功能说明： |
获取视频宽度 |
| videoHeight() |
| 功能说明： |
获取视频高度 |
| zoom(num) |
| 功能说明： |
调整视频的显示百分比 |
| 函数说明： |
num=数字，只接受3种：100，75，50 |
| rotate(num) |
| 功能说明： |
旋转视频的角度 |
| 函数说明： |
num=数字，只接受4种：0，90，180，270 |
| track(i) |
| 功能说明： |
切换字幕 |
| 函数说明： |
i=字幕编号 |
| layer(obj,bar) |
| 功能说明： |
向播放器添加一个层 |
| 函数说明： |
obj=1是可以直接定义页面已有的节点，如'.level'或'#level'
2是可以动态添加层内容，此时obj为一个对象如{class:'.level',content:'内容'}
bar=true添加在底部控制栏上，=false添加在播放器内 |
|
查看示例,添加一个已存在的节点层
视频容器
|
|
查看示例，动态添加一个层
视频容器
|
| closeLayer(ele) |
| 功能说明： |
关闭指定层 |
|
查看示例
视频容器
|
| backLive(bool) |
| 功能说明： |
显示/隐藏回到直播按钮 |
| 函数说明： |
bool:true=显示，false=隐藏 |
| playbackRate() |
| 功能说明： |
返回视频播放速度 |
| definition(i) |
| 功能说明： |
切换清晰度 |
| 函数说明： |
i=清晰度编号 |
| cookie(name) |
| 功能说明： |
获取cookie记录
示例：
player.cookie('cookiename')或者player.cookie() |
| remove() |
| 功能说明： |
卸载播放器
示例：
player.remove() |
元件控制示例
//新建一个元件，附值给变量ele
var ele=player.layer({
class:'dm',
content:'弹幕内容'
});
//animate-缓动函数
ele.animate('left:'+(-ele.getWidth()+'px'),5000,'',function(){
ele.remove();//删除元件
});原理，首先使用播放器的API：layer为播放器新建一个层，并且赋值给变量ele，然后就可以对其进行一系列的控制了。以下列出相应的控制API
元件的API列表
| css(obj[,value]) |
| 功能说明： |
定义/获取样式 |
| 函数说明： |
定义样式方法有两种：
ele.css('width','100px');
ele.css({'width':'100px','height':'30px'})
获取样式：
ele.css('width') |
| remove() |
| 功能说明： |
删除元件 |
| 函数说明： |
示例：ele.remove() |
| animate(parameter,totalTime,easing,callBack) |
| 功能说明： |
缓动 |
| 函数说明： |
parameter=文本，缓动结果的样式列表，支持left,right,top,bottom,alpha,width,height，各属性用英文逗号或分号间隔
totalTime=缓动时长
easing=动画效果
callBack=监听缓动结束运行
animate('left:100px,top:20px',5000,'',function(){//缓动结束});
|
| 动画列表： |
easing可以实现的效果列表如下：
None，Quadratic，Cubic，Quartic，Quintic，Sine，Exponential，Circular，Elastic，Back，Bounce
以上每种效果又包含三种样式：easeIn，easeOut，easeInOut
示例如下：
animate('left:100px,top:20px',5000,'None.easeIn',function(){//缓动结束});
|
|
观看所有缓动效果
视频容器
|
|
观看完整弹幕示例
视频容器
|
| animatePlay() |
| 功能说明： |
播放缓动 |
| 函数说明： |
注意：当新建一个缓动时，默认即是播放的，该函数只有在缓动暂停时需要继续播放时使用
|
| animatePause() |
| 功能说明： |
暂停缓动 |
