前言
ckplayer是一款在網頁上播放視頻的免費視頻插件，該插件兼容性強、使用簡單、api齊全。另外，任何個人網站或商業網站在不修改右鍵版權的基礎上都可以免費使用。
下面將對ckplayer的整個使用過程做一遍簡單的說明與演示（想了解更多功能請訪問官網）。有興趣的朋友可以跟着做一遍。
本文涉及環境
開發工具：hbuilder
ckplayer版本：ckplayer v6.7(插件下載地址：點擊下載)
瀏覽器：chrome v48.0.2564.82
注意：ckplayer插件需要在服務器環境中運行，在本地環境將不能正常觀看視頻
項目部署
*壓縮包中需要用到的文件：
1. 在huilder中建立項目："PlayerDemo"
2. 解壓ckplayer壓縮包中的文件，並將需要用到的文件及文件夾復制到項目中
3.創建視頻目錄video並放入視頻
4. 新建index.html文件用於編寫代碼
創建的項目目錄如下：
調用ckplayer播放視頻
最常用的調用ckpalyer播放器的流程大體可以分為以下幾個部分：
在index.html中
1.引用ckplayer.js核心js文件ckplayer.js
<script src="ckplayer/ckplayer.js" type="text/javascript" charset="utf-8"></script>
2.在需要使用播放器的位置放置一個帶有id的div元素，id便於將播放器綁定到該元素。
<div id="ckplayer"></div>
3.在js代碼中，用CKobject對象的embed方法調用並渲染播放器。
1 CKobject.embed( 2 "ckplayer/ckplayer.swf",//注意：這里必須為“ckplayer.swf”文件，用於加載flash播放器 3 "ckplayer", 4 "ckplayer1", 5 "600", 6 "400", 7 true, 8 { 9 f:"video/1.mp4", 10 c:0 11 }, 12 ['video/1.mp4->video/mp4'] 13 14 );
CKobject是操作ckplayer播放器的主要對象，embed方法能夠智能判斷平台（html5/flashPlayer）調用合適的播放器進行播放
簡單的解釋下embed方法各個參數的用途
CKobject.embed( 'flash播放器文件路徑', '容器ID（用於綁定到網頁中）', '播放器的ID（將播放器替換綁定到網頁后，播放器id）', '寬度，可以是百分比', '高度，可以是百分比', 優先調用設置（false=優先調用flash播放器，true=優先調用HTML5播放器）, flash播放器的初始化參數（對象形式），以及HTML5初始化參數，比如默認播放/暫停等設置, HTML5視頻播放地址（數組形式），詳細的可參考官網HTML5視頻調用的說明 )
延伸一下:HTML5視頻播放地址數組中的每一項都要遵循"視頻路徑->視頻格式的MIME-type"，以下是html5支持的視頻格式MIME-type對照表
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>ckplayer演示</title> 6 </head> 7 <body> 8 <div id="ckplayer"></div><!--用於替換播放器--> 9 </body> 10 <script src="ckplayer/ckplayer.js" type="text/javascript" charset="utf-8"></script> 11 <script type="text/javascript"> 12 CKobject.embed( 13 "ckplayer/ckplayer.swf", 14 "ckplayer", 15 "ckplayer1", 16 "600", 17 "400", 18 false, 19 { 20 f:"video/1.mp4", 21 c:0 22 }, 23 ['video/1.mp4->video/mp4'] 24 25 ); 26 </script> 27 </html>
調用完成后，在瀏覽器上加載網頁，效果如下（該視頻文件是我從網上隨便找的，如有違權，請聯系我）
這樣，一個簡單的調用就完成了。大家可以看到，視頻中出現的水印和文字廣告等等一些小小的問題，可能不太令人滿意。接下來就演示下如何自定義我們的視頻播放器。
自定義播放器
修改logo
logo的位置控制在ckplayer.js和ckplayer.xml里，以ckplayer.js為例分別是
1.視頻加載前顯示的logo文件
mylogo: 'logo.swf',//logo資源
pm_mylogo: '1,1,-100,-55'
2.默認右上角一直顯示的logo
logo: 'cklogo.png',//logo資源
pm_logo: '2,0,-100,20'
控制位置的四個值的意思分別是：
1、水平對齊方式，0是左，1是中，2是右
2、垂直對齊方式，0是上，1是中，2是下
3、水平偏移量
4、垂直偏移
其中，mylogo和logo都可以使用png或swf文件。仔細觀察ckplayer的核心文件及文件夾你會發現，里面沒有mylogo和logo這兩個屬性所用的logo.swf及cklogo.png文件。其實這些資源文件被放在了style.swf文件中了，只需要將其文件名改成style.zip並打開，就可看到一系列文件。其中就包括logo.swf和cklogo.png文件。附圖：
如果想要修改logo圖片，只需要將要修改的圖片放進去，然后將style.zip改回style.swf（必要時請清理緩存），最后把上述logo或者mylogo值修改成自己放入的圖片名即可。
如果不想要logo，只需要將logo或mylogo置為null即可。
mylogo: null
logo: null
運行如下：
可以看到，視頻中的“ckplayer”字樣的logo水印已經不存在了。
修改滾動文字廣告
滾動文字廣告的開啟與關閉
打開ckplayer.js，可以看到這么一條語句
setup: '1,1,1,1,1,2,0,1,2,0,0,1,200,0,2,1,0,1,1,1,2,10,3,0,1,2,3000,0,0,0,0,1,1,1,1,1,1,250,0,90,0,0,0'
其中第9個參數是和滾動文字的開啟與關閉有關的，0是不開啟，1是開啟且不使用關閉按鈕，2是開啟並且使用關閉按鈕，開啟后將在加載視頻的時候加載滾動文字廣告
如果將第9個參數修改為0，運行文件很容易看到滾動文字的廣告已經不在了
修改滾動文字廣告
如果想要修改並顯示滾動文字廣告，需要將setup的第九個參數改為1（不帶“×”形式的關閉按鈕）或2（帶“×”形式的關閉按鈕），並將默認的advmarquee屬性值修改成自己的廣告詞（可以帶有html標簽）
默認為：
advmarquee: escape('{a href="http://www.ckplayer.com"}{font color="#FFFFFF" size="12"}這里可以放文字廣告，播放器默認使用這里設置的廣告內容，如果不想在這里使用可以清空這里的內容，如果想在頁面中實時定義滾動文字廣告內容，可以清空這里的內容，然后在頁面中設置廣告函數。{/font}{/a}'),
修改為：
advmarquee: "好好學習，天天向上！",
效果展示：
可以看到，視頻下方的滾動廣告改成了自己定義的“好好學習，天天向上！”，但是，真丑！！究其原因，是ckplayer自作聰明地給滾動廣告加上了發光濾鏡、、、好端端的廣告，加這么難看的濾鏡干啥，去掉！
修改滾動文字廣告發光濾鏡
在ckplayer.js中，滾動文字發光濾鏡用pm_glowfilter屬性控制
默認屬性值
pm_glowfilter:'1,0x01485d, 100, 6, 3, 10, 1, 0, 0',
該屬性各參數詳解
1、是否使用發光濾鏡，0是不采用，1是使用 2、(default = 0xFF0000) — 光暈顏色，采用十六進制格式 0xRRGGBB。 默認值為 0xFF0000 3、(default = 100) — 顏色的 Alpha 透明度值。 有效值為 0 到 100。 例如，25 設置透明度為 25% 4、(default = 6.0) — 水平模糊量。 有效值為 0 到 255（浮點）。 2 的乘方值（如 2、4、8、16 和 32）經過優化，呈現速度比其它值更快 5、(default = 6.0) — 垂直模糊量。 有效值為 0 到 255（浮點）。 2 的乘方值（如 2、4、8、16 和 32）經過優化，呈現速度比其它值更快 6、(default = 2) — 印記或跨頁的強度。 該值越高，壓印的顏色越深，而且發光與背景之間的對比度也越強。 有效值為 0 到 255 7、(default = 1) — 應用濾鏡的次數 8、(default = 0) — 指定發光是否為內側發光。 值 1 指定發光是內側發光。 值 0 指定發光是外側發光（對象外緣周圍的發光） 9、(default = 0) — 指定對象是否具有挖空效果。 值為 1 將使對象的填充變為透明，並顯示文檔的背景顏色
可以看到，當pm_glowfilter第一個參數為0時，就會關閉濾鏡。所以修改pm_glowfilter第一個參數為0
pm_glowfilter:'0,0x01485d, 100, 6, 3, 10, 1, 0, 0',
效果顯而易見
由於pm_glowfilter參數比較多，這里就不一一演示修改效果，更多設置效果還需要大家自己嘗試。
刪除右側窗口
如果感覺右邊的開關燈、分享和調整窗口礙眼的話，可以在ckplayer.js中將以下函數關於開關燈、分享和調整的代碼注釋掉。
1 function ckcpt() { 2 var cpt = ''; 3 cpt += 'right.swf,2,1,0,0,2,0|'; //右邊開關燈，調整，分享按鈕的插件 4 cpt += 'share.swf,1,1,-180,-100,3,0|'; //分享插件 5 cpt += 'adjustment.swf,1,1,-180,-100,3,0|'; //調整大小和顏色的插件 6 return cpt; 7 }
如：
1 function ckcpt() { 2 var cpt = ''; 3 //cpt += 'right.swf,2,1,0,0,2,0|'; //右邊開關燈，調整，分享按鈕的插件 4 //cpt += 'share.swf,1,1,-180,-100,3,0|'; //分享插件 5 //cpt += 'adjustment.swf,1,1,-180,-100,3,0|'; //調整大小和顏色的插件 6 return cpt; 7 }
原本的具有側邊欄的播放器，
修改后側邊欄和觸發按鈕都消失了
總結
本教程到這里就結束了，相信能夠帶大家入個門。如果想了解更多功能，請參見官網。由於篇幅有限，沒有介紹到的地方，還望大家原諒！