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
duration()
功能说明: 返回视频总时间
time()
功能说明: 获取当前播放时间
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()
功能说明: 跳过贴片广告
fps()
功能说明: 获取当前的fps
width()
功能说明: 获取播放器宽度
height()
功能说明: 获取播放器高度
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')
show()
功能说明: 显示
hide()
功能说明: 隐藏
getWidth()
功能说明: 获取宽度
getHeight()
功能说明: 获取高度
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()
功能说明: 暂停缓动