基础
功能配置
风格/语言配置
视频处理
服务器配置
IIS支持视频播放
apache视频支持
nginx视频支持
常见问题

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);,返回元件(名称)
传递的变量是一个对象,该对象里可以定义元件的内容。支持和内容有:文本,普通图片(png,jpg,jpeg),gif图片,swf。
以下是一个简单的示例:

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.sopcast.cn"
	},
	{
	    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.sopcast.cn','_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)