介绍

下载和安装

风格制作(风格制作注意点)

介绍

CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，具体的各按钮的位置和底部背景的设置在ckplayer/ckplayer.js里设置。

下载和安装

最新版本请直接至官网下载，下载的文件目录如下：

demo.htm-单视频播放示例文件。

ckplayer文件夹，其中共包括：

ckplayer.js-通用的js文件，用来设置播放器风格和加载播放器

ckplayer.swf-播放器swf文件

assets-播放器风格文件存放目录，用户可以结合ckplayer.js制作自己的风格

值得注意的是：此款播放器需要放在虚拟目录里方可正常使用，直接打开无法使用。

风格制作

风格制作主要使用到ckplayer.js和assets文件夹，assets文件夹主要用来存放各按钮的图片，所有图片都是以png格式存储。

ckplayer.js里涉及到风格的行数为第2行至第41行，风格参数说明如下：

var cklogo='ckplayer/assets/cklogo.png';//logo,用来显示在播放器界面上的logo

var ckalign=2;//logo的对齐方式，0是左上，1是左下，2是右上，3是右下

var ckalign_x=100;//这里跟ckalign有直接关系，如果是ckalign=0/1 左边距离 2/3 是右边距离

var ckalign_y=10;//同上，ckalign=0/2 离上边距离，1/3 是离下边距离

var progressbar_frame='#191919';//进度条外框颜色

var progressbar_loadbox='#606060';//预加载进度条的颜色

var progressbar_schedule='#056E9F';//播放进度条颜色

var all_Background='#000000';//总体背景色

var buttom_Background='0x2C2C2C,0x212121';//底部容器颜色，如果想要渐变，请使用数组如buttom_Background='0xFF0000,0xFFDD00,0xFFFFFF';

var title_Background='#000000';//提示框背景色

var title_borderColor='#696969';//提示框边框色

var title_Color='#DEDEDE';//提示框文字颜色

var buttom_height=30; //底部容器的高度

var schedule_height=4;//进度框的高度

var suspension_width=14;//进度框上的悬浮框宽度

var suspension_height=8;//进度框上的悬浮框高度

var play_width=35;//播放按钮和暂停按钮的宽度

var play_height=30;//播放按钮和暂停按钮的高度

var play_x=0;//播放按钮和暂停按钮的X坐标-离底部容器左边的距离

var play_y=0;//播放按钮和暂停按钮的y坐标-离底部容器顶部的距离

var statistics_width=100;//统计框的宽度-显示当前进度和视频总长时间的文本框

var statistics_height=12;//统计框的高度

var statistics_x=45;//统计框离左边的距离

var statistics_y=10;//统计框离底部容器顶端的距离

var statistics_color='#FFFFFF';//统计框的字体颜色

var full_width=35;//全屏按钮的宽

var full_height=30;//全屏按钮的高

var full_x=0;//全屏按钮离左边的距离，如果设置成0则为距右对齐

var full_y=0;//全屏按钮离底部容器上方的距离

var volume_width=53;//音量框的宽度

var volume_height=4;//音量框的高度

var volume_x=100;//音量框离底部容器右边的距离，设置成0则为右对齐

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=30;//开启和静音按钮的高度

var sound_x=140;//开启和静音按钮离右边的距离

var sound_y=0//开启和静音按钮离底部容器顶部距离

风格制作注意点

制作风格要特别注意的就是ckplayer.js里的第10行buttom_Background参数，这里分二种情况，一种是使用单一色时，颜色值使用#+十六进制作颜色值，如#FFFFFF表示白色,#000000表示黑色，另一种情况是使用渐变色，这里需要使用一组16进制颜色值，这里要注意的是不能使用#开头，需要使用0x+十六进制，如0xFFFFFF,0x000000，底部将会显示一个从白到黑的渐变色，值得注意的是这里渐变色的使用是均匀分布的，所以对于复杂的渐变色需要使用更多的颜色色进行填充，比如底部的高度为30px,用户可以直接使用30个颜色值对其定义