ckplayer

CKplayer，其全稱為超酷flv播放器，它是一款用於網頁上播放視頻的軟體，支持的格式有：http協定上的flv,f4v,mp4格式，同時支持rtmp視頻流格式播放，此播放器的特點在於用戶可以自己定義播放器的風格，諸如播放/暫停按鈕，靜音按鈕，全螢幕按鈕都是以外部圖片接口形式調用，用戶根據自己的需要製作出播放器風格所需要使用的各個按鈕圖片然後替換掉原始風格里相應的圖片就可以製作出自己的風格了，具體的各按鈕的位置和底部背景的設定在ckplayer/ckplayer.js里設定。

基本介紹

• 中文名：超酷flv播放器
• 外文名：ckplayer
• 屬性：一款軟體
• 用途：網頁上播放視頻
• 支持格式：flv,f4v,mp4

下載和安裝

最新版本請直接至官網下載。分為二個版本：精簡版和完整版，區別在於精簡版的檔案只包含了最簡單的播放視頻模式，新手建議下載精簡版使用，很容易上手。但是如果需製作如開關燈，站外分享，調節視頻等功能就需要使用完整版的了。

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的對齊方式，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個顏色值對其定義