下载和安装
ckplayer播放器介面
最新版本请直接至官网下载。分为二个版本:精简版和完整版,区别在于精简版的文件只包含了最简单的播放视频模式,新手建议下载精简版使用,很容易上手。但是如果需制作如开关灯,站外分享,调节视频等功能就需要使用完整版的了。
安装很简单,只要把下载的打包文件解压下来,上传到网站空间,就可以通过http://域名/index.htm访问了
值得注意的是:此款播放器需要放在网络环境里方可正常使用,直接打开无法使用。
风格制作
风格制作主要使用到ckplayer.js和assets文件夹,assets文件夹主要用来存放各按钮的图片,所有图片都是以png格式存储。
ckplayer.js里涉及到风格的行数为第2行至第41行,风格参数说明如下:
var cklogo=ckplayer/assets/cklogo.png;//logo,用来显示在播放器界面上的logo
var ckalign=2;//logo的对齐方式,是左上,1是左下,2是右上,3是右下
var ckalign_x=1;//这里跟ckalign有直接关系,如果是ckalign=/1 左边距离 2/3 是右边距离
var ckalign_y=1;//同上,ckalign=/2 离上边距离,1/3 是离下边距离
var progressbar_frame=#191919;//进度条外框颜色
var progressbar_loadbox=#666;//预加载进度条的颜色
var progressbar_schedule=#56E9F;//播放进度条颜色
var all_Background=#;//总体背景色
var buttom_Background=x2C2C2C,x2012121;//底部容器颜色,如果想要渐变,请使用数组如buttom_Background=xFF,xFFDD,xFFFFFF;
var title_Background=#;//提示框背景色
var title_borderColor=#696969;//提示框边框色
var title_Color=#DEDEDE;//提示框文字颜色
var buttom_height=3; //底部容器的高度
var schedule_height=4;//进度框的高度
var suspension_width=14;//进度框上的悬浮框宽度
var suspension_height=8;//进度框上的悬浮框高度
var play_width=35;//播放按钮和暂停按钮的宽度
var play_height=3;//播放按钮和暂停按钮的高度
var play_x=;//播放按钮和暂停按钮的X坐标-离底部容器左边的距离
var play_y=;//播放按钮和暂停按钮的y坐标-离底部容器顶部的距离
var statistics_width=1;//统计框的宽度-显示当前进度和视频总长时间的文本框
var statistics_height=12;//统计框的高度
var statistics_x=45;//统计框离左边的距离
var statistics_y=1;//统计框离底部容器顶端的距离
var statistics_color=#FFFFFF;//统计框的字体颜色
var full_width=35;//全屏按钮的宽
var full_height=3;//全屏按钮的高
var full_x=;//全屏按钮离左边的距离,如果设置成则为距右对齐
var full_y=;//全屏按钮离底部容器上方的距离
var volume_width=53;//音量框的宽度
var volume_height=4;//音量框的高度
var volume_x=1;//音量框离底部容器右边的距离,设置成则为右对齐
var volume_y=13;//音量框离底部容器顶部的距离
var volume_float_width=6;//音量浮动框的宽度
var volume_float_height=12;//音量浮动框的高度
var volume_float_y=4;//音量浮动框离底部容器的顶部距离
var sound_width=35;//开启和静音按钮的宽度
var sound_height=3;//开启和静音按钮的高度
var sound_x=14;//开启和静音按钮离右边的距离
var sound_y=//开启和静音按钮离底部容器顶部距离
风格制作注意点
制作风格要特别注意的就是ckplayer.js里的第1行buttom_Background参数,这里分二种情况,一种是使用单一色时,颜色值使用#+十六进制作颜色值,如#FFFFFF表示白色,#表示黑色,另一种情况是使用渐变色,这里需要使用一组16进制颜色值,这里要注意的是不能使用#开头,需要使用x+十六进制,如xFFFFFF,x,底部将会显示一个从白到黑的渐变色,值得注意的是这里渐变色的使用是均匀分布的,所以对于复杂的渐变色需要使用更多的颜色色进行填充,比如底部的高度为3px,用户可以直接使用3个颜色值对其定义