JS-控制播放器
#控制示例
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8" data-name="ckplayer"></script> <div class="video" style="width: 600px;height: 400px;"></div> <script type="text/javascript"> //定义一个变量:videoObject,用来做为视频初始化配置 var videoObject = { container: '.video', //“#”代表容器的ID,“.”或“”代表容器的class variable: 'player', //播放函数名称,该属性必需设置,值等于下面的new ckplayer()的对象 loaded:'loadedHandler',//播放器加载完成后调用该函数 video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址 }; var player = new ckplayer(videoObject);//初始化播放器 function loadedHandler(name){ //调用到该函数后说明播放器已加载成功,可以进行部分控制了。此时视频还没有加载完成,所以不能控制视频的播放,暂停,获取元数据等事件 player.videoMute()//设置静音 } </script>
从上面的代码中可以看出,控制函数至少需要等到播放器加载完成后才可以使用。有部分控制函数需要等到播放器加载到视频以后才可以使用。怎么判断视频已加载呢?方法是使用监听函数监听播放器的元数据信息,如果获取到元数据信息了,则视频已加载成功,下面为一个在监听到视频元数据后执行播放的示例:
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8" data-name="ckplayer"></script> <div class="video" style="width: 600px;height: 400px;"></div> <script type="text/javascript"> //定义一个变量:videoObject,用来做为视频初始化配置 var videoObject = { container: '.video', //“#”代表容器的ID,“.”或“”代表容器的class variable: 'player', //播放函数名称,该属性必需设置,值等于下面的new ckplayer()的对象 loaded:'loadedHandler',//播放器加载完成后调用该函数 video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址 }; var player = new ckplayer(videoObject);//初始化播放器 function loadedHandler(name){ //调用到该函数后说明播放器已加载成功,可以进行部分控制了。此时视频还没有加载完成,所以不能控制视频的播放,暂停,获取元数据等事件 player.addListener('loadedmetadata', loadedMetaDataHandler); //监听元数据 } function loadedMetaDataHandler(name){ player.videoPlay();//控制视频播放 } </script>
#控制功能说明
1:使用控制动作时必需确保播放器已加载
2:不能控制播放器的全屏和退出全屏动作,出于安全考虑,浏览器必需监听到用户点击动作才能进行全屏操作和退出全屏操作
3:当使用player.videoClear()清空视频后请同时清空播放器容器的内容
#控制API列表
videoPlay() | |
支持环境: | html5,flashplayer |
功能说明: | 播放 |
函数说明: | 该函数同时可控制播放器跳过前置广告,插入广告,暂停广告 |
videoPause() | |
支持环境: | html5,flashplayer |
功能说明: | 暂停 |
函数说明: |
playOrPause() | |
支持环境: | html5,flashplayer |
功能说明: | 在播放和暂停二个状态之间切换 |
函数说明: |
videoMute() | |
支持环境: | html5,flashplayer |
功能说明: | 静音 |
函数说明: |
videoEscMute() | |
支持环境: | html5,flashplayer |
功能说明: | 取消静音 |
函数说明: |
changeVolume(volume) | |
支持环境: | html5,flashplayer |
功能说明: | 改变音量 |
函数说明: | volume指音量,类型是:Number,范围是:0-1 |
videoSeek(time) | |
支持环境: | html5,flashplayer |
功能说明: | 跳转指定时间点 |
函数说明: | time指时间点,类型是:Int,单位:秒 |
changeControlBarShow(show) | |
支持环境: | html5,flashplayer |
功能说明: | 是否显示控制栏 |
函数说明: | show=false时控制栏隐藏,必需手动控制显示才可以继续恢复原的效果 |
addListener(name,function) | |
支持环境: | html5,flashplayer |
功能说明: | 添加监听 |
函数说明: | name=事件名称,function=监听函数 |
removeListener(name,function) | |
支持环境: | html5,flashplayer |
功能说明: | 删除监听 |
函数说明: | name=事件名称,function=监听函数 |
videoClear() | |
支持环境: | html5,flashplayer |
功能说明: | 清除视频 |
函数说明: | 这个功能基本属性无用的功能,可以不必考虑该函数的使用。 |
getMetaDate() | |
支持环境: | html5,flashplayer |
功能说明: | 获取元数据 |
函数说明: | 返回一个对象,包含视频的元数据信息+播放器的相关信息。返回的主要信息如下: 总时间:duration,单位:秒 音量:volume,范围0-1 播放器的宽度:width 播放器的高度:height 视频宽度:videoWidth 视频高度:videoHeight 视频原始宽度:streamWidth 视频原始高度:streamHeight 是否暂停状态:paused --------------------------------------------- 在flashplayer里还有以下一些常用的元数据信息 总加载量:bytesTotal |
addElement(obj) | |
支持环境: | html5,flashplayer |
功能说明: | 添加一个元件到播放器中 |
函数说明: | 简单示例:var elementTemp = player.addElement(Object);,返回元件(名称) var attribute = { list: [ //list=定义元素列表 { type: 'gif', //定义元素类型:只有二种类型,image=使用图片,text=文本 file: 'screenshot/gif.gif', //图片地址 radius: 30, //图片圆角弧度 width: 30, //定义图片宽,必需要定义 height: 30, //定义图片高,必需要定义 alpha: 0.9, //图片透明度(0-1) marginLeft: 10, //图片离左边的距离 marginRight: 10, //图片离右边的距离 marginTop: 10, //图片离上边的距离 marginBottom: 10, //图片离下边的距离 clickEvent: "link->http://www.ckplayer.com" }, { type: 'text', //说明是文本 text: '演示弹幕内容,弹幕只支持普通文本,不支持HTML', //文本内容 color: '0xFFDD00', //文本颜色 size: 14, //文本字体大小,单位:px font: '"Microsoft YaHei", YaHei, "微软雅黑",', //字体 leading: 30, //文字行距 alpha: 1, //文本透明度(0-1) paddingLeft: 10, //文本内左边距离 paddingRight: 10, //文本内右边距离 paddingTop: 0, //文本内上边的距离 paddingBottom: 0, //文本内下边的距离 marginLeft: 0, //文本离左边的距离 marginRight: 10, //文本离右边的距离 marginTop: 10, //文本离上边的距离 marginBottom: 0, //文本离下边的距离 backgroundColor: '0xFF0000', //文本的背景颜色 backAlpha: 0.5, //文本的背景透明度(0-1) backRadius: 30, //文本的背景圆角弧度 clickEvent: "actionScript->videoPlay" } ], x: 10, //元件x轴坐标,注意,如果定义了position就没有必要定义x,y的值了,支持数字和百分比 y: 50, //元件y轴坐标 //position:[1,1],//位置[x轴对齐方式(0=左,1=中,2=右),y轴对齐方式(0=上,1=中,2=下) alpha: 1, //元件的透明度 backgroundColor: '0xFFDD00', //元件的背景色 backAlpha: 0.5, //元件的背景透明度(0-1) backRadius: 60, //元件的背景圆角弧度 clickEvent: "actionScript->videoPlay" } var elementTemp = player.addElement(attribute); |
deleteElement(name) | |
支持环境: | html5,flashplayer |
功能说明: | 删除元件 |
函数说明: | 示例,删除addElement()函数新建的元件: deleteElement(elementTemp); |
getElement() | |
支持环境: | html5,flashplayer |
功能说明: | 获取元件 |
函数说明: | 以上面的示例:var dm=getElement(elementTemp); |
animate(obj) | |
支持环境: | html5,flashplayer |
功能说明: | 元件缓动 |
函数说明: | 让一个元件进行缓动。示例:var obj = { element: elementTemp,//元件(名称) parameter: 'x',//缓动类型,x=方向,y=方向,alpha=透明度 static: true, //是否禁止其它属性,true=是,当一个属性变化时,其它的不变 effect: 'None.easeOut',//缓动名称+类型 start: null,//开始位置,设置成null,则以当前的位置开始 end: 0,//结束位置 speed: 10,//缓动频率 overStop: true,//鼠标经过元件时是否暂停缓动 pauseStop: true,//视频暂停时是否暂停缓动 callBack: 'deleteChild'//缓动结束时调用的js函数 }; var danmuAnimate = player.animate(obj);缓动的类型共有3种:easeIn,easeOut,easeInOut 缓动的名称共有11种:None,Quadratic,Cubic,Quartic,Quintic,Sine,Exponential,Circular,Elastic,Back,Bounce |
deleteAnimate(obj) | |
支持环境: | flashplayer,html5 |
功能说明: | 删除缓动 |
函数说明: |
obj是缓动对象名称 |
videoRotation(rotation) | |
支持环境: | flashplayer |
功能说明: | 旋转视频 |
函数说明: |
rotation指角度,类型是:Number,仅支持:0,90,270,360,-90,-270 另外还可以设置成:1,顺时针旋转、-1,逆时针旋转 |
videoZoom(zoom) | |
支持环境: | html5,flashplayer |
功能说明: | 改变尺寸比例 |
函数说明: | zoom的默认值是:1,类型:Int,proportion的值必需大于等于0,当小于1时缩小,大于1时放大,比如1.1将增加10%的大小 |
videoProportion(proportion) | |
支持环境: | flashplayer |
功能说明: | 改变宽高比例 |
函数说明: | proportion的默认值是:(1,1),示例:调整成4:3的则是:videoProportion(4,3) |
videoBrightness(n) | |
支持环境: | flashplayer |
功能说明: | 调整亮度 |
函数说明: | 设置亮度值,值的大小在-255和255之间,0为中间值,小于0则变暗,大于0则变亮 |
videoContrast(n) | |
支持环境: | flashplayer |
功能说明: | 调整对比度 |
函数说明: | 设置对比度值,值的大小在-255和255之间,127.5为中间值,小于127.5则偏暗,大于127.5则对比鲜明 |
videoSaturation(n) | |
支持环境: | flashplayer |
功能说明: | 调整饱和度 |
函数说明: | 设置饱和度值,值的大小在-255和255之间,1为中间值,0则切换成黑白照片 |
videoHue(n) | |
支持环境: | flashplayer |
功能说明: | 调整色相 |
函数说明: | 设置色相值,值的大小在-255和255之间,0为中间值 |
screenshot(object,save,name) | |
支持环境: | flashplayer |
功能说明: | 截图功能 |
函数说明: | object=截屏对象,分成二种:字符类型,video=视频截图,player=播放器截图。save=是否需要保存示,类型:布尔型,true=需要保存,false=不需要保存。name=保存时的名称。例:screenshot('video',false,'视频截图'),如果不保存,则需要一个函数来监听图片数据。另外,需要截图的功能的视频需要在当前播放器域下有全部权限 |
changeConfig(..arg,value) | |
支持环境: | html5,flashplayer |
功能说明: | 修改所有外部传递的数据 |
函数说明: | 示例:要修改flashplayer里的autoplay(默认播放暂停) changeConfig('flashvars','autoplay',true); 示例:修改config的autoload changeConfig('config','autoload',false); |
getConfig(...arg) | |
支持环境: | html5,flashplayer |
功能说明: | 获取所有外部传递的数据 |
函数说明: | 示例:获取config里的autoload getConfig('config','autoload') 示例:获取config的值 getConfig('config') |
newVideo(obj) | |
支持环境: | html5,flashplayer |
功能说明: | 改变当前的播放地址及相关值 |
函数说明: | 示例: newVideo({autoplay:true,video:'newvideo.mp4'}); |
custom(...arg,value) | |
支持环境: | flashplayer |
功能说明: | 控制自定义元件的显示与隐藏 |
函数说明: | 控制播放器上的自定义元件的示例: custom('swf','swfName',true) 控制控制栏上的自定义元件的示例: custom('controlBar','swf','swfName',true) |
quitFullScreen() | |
支持环境: | html5,flashplayer |
功能说明: | 退出全屏 |
函数说明: |
openUrl(url,obj) | |
支持环境: | flashplayer |
功能说明: | 打开一个网址 |
函数说明: | 示例: openUrl('http://www.ckplayer.com','_blank') |
changePlaybackRate(n) | |
支持环境: | html5 |
功能说明: | 改变播放速度 |
函数说明: | 支持的值:0,1,2,3 |
getCurrentSrc() | |
支持环境: | html5,flashplayer |
功能说明: | 获取当前播放的视频地址 |
函数说明: | 只能获取当前所播放视频地址 |
changeDefinition(index) | |
支持环境: | html5,flashplayer |
功能说明: | 切换清晰度 |
函数说明: | 清晰度编号是从0开始 |
changeSubtitles(index) | |
支持环境: | html5,flashplayer |
功能说明: | 切换字幕 |
函数说明: | 字幕编号是从0开始 |
changeSubtitlesSize(size) | |
支持环境: | html5,flashplayer |
功能说明: | 修改字幕字体大小 |
函数说明: | changeSubtitlesSize(20) |