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() |
功能说明: |
暂停缓动 |