今天在工作的過程中遇到一個功能：在網頁中加入視頻播放器，類似於我們經常看到的優酷,愛奇藝等視頻網站的功能。
ckplayer（官網：http://www.ckplayer.com/）是一款在網頁上播放視頻的免費的播放器，功能強大，體積小巧，使用起來隨心所欲。
注意上面的紅色框：請注意：播放器上的任何元素都可以換成您自己的！（在開發過程中，你回發現ckplayer的注釋寫的是很完全的，這個值得贊一下....）
不管這么多了，先來看看效果圖吧：
1.這是播放前的廣告
2.這是播放的視頻
3.暫停界面
4.調整功能界面
5.分享功能界面
6.關燈功能界面
看到這里，你是不是也想動手試試，做出自己的網頁播放器。
開始動手：
==================================================================================
前期准備：
1.下載ckplayer，這里下載 推薦完整版
下載地址：http://www.ckplayer.com/bbs/forum.php?mod=viewthread&tid=423
下載完成后，解壓縮：
我們只需要下面紅色部分文件：
2.項目結構：
3.在一個html頁面中加入這些代碼：
1 <div id="flashcontent"></div> 2 <div id="video" style="position:relative;z-index: 100;width:600px;height:400px;"><div id="a1"></div></div> 3 <script type="text/javascript" src="ckplayer/ckplayer.js" charset="UTF-8"></script> 4 <script type="text/javascript" src="js/offlights.js" charset="UTF-8"></script> 5 <script type="text/javascript"> 6 //以下為調用播放器的標准代碼 7 var flashvars={ 8 f:'http://movie.ks.js.cn/flv/2011/11/8-1.flv',//視頻地址 9 a:'',//調用時的參數，只有當s>0的時候有效 10 s:'0',//調用方式，0=普通方法（f=視頻地址），1=網址形式,2=xml形式，3=swf形式(s>0時f=網址，配合a來完成對地址的組裝) 11 c:'0',//是否讀取文本配置,0不是，1是 12 x:'',//調用xml風格路徑，為空的話將使用ckplayer.js的配置 13 i:'',//初始圖片地址 14 d:'http://www.ckplayer.com/temp/11.jpg',//暫停時播放的廣告，swf/圖片 15 u:'http://www.baidu.com',//暫停時如果是圖片的話，加個鏈接地址 16 l:'http://www.ckplayer.com/down/start.swf',//視頻開始前播放的廣告，swf/圖片/視頻 17 r:'',//視頻開始前播放圖片/視頻時加一個鏈接地址 18 t:'1',//視頻開始前播放swf/圖片時的時間 19 e:'3',//視頻結束后的動作，0是調用js函數，1是循環播放，2是暫停播放，3是調用視頻推薦列表的插件 20 v:'85',//默認音量，0-100之間 21 p:'1',//視頻默認0是暫停，1是播放 22 h:'1',//播放http視頻流時采用何種拖動方法，0是按關鍵幀，1是按關鍵時間點 23 q:'',//視頻流拖動時參考函數，默認是start 24 m:'0',//默認是否采用點擊播放按鈕后再加載視頻，0不是，1是,設置成1時不要有前置廣告 25 g:'',//視頻直接g秒開始播放 26 j:'',//視頻提前j秒結束 27 k:'10|40|80',//提示點時間，如 30|60鼠標經過進度欄30秒，60秒會提示n指定的相應的文字 28 n:'跳過開頭|小企鵝寶寶下水了|跳過結尾',//提示點文字，跟k配合使用，如 提示點1|提示點2 29 b:'0x000',//播放器的背景色，如果不設置的話將默認透明 30 w:'',//指定調用自己配置的文本文件,不指定將默認調用和播放器同名的txt文件 31 //調用播放器的所有參數列表結束 32 //以下為自定義的播放器參數用來在插件里引用的 33 my_title:'視頻標題',//視頻標題 34 my_url:'http://www.ckplayer.com/index.php',//本頁面地址 35 my_summary:'這是一個測試頁面',//視頻介紹，請保持在一行文字，不要換行 36 my_pic:'http://www.ckplayer.com/temp/11.jpg'//分享的圖片地址 37 //調用自定義播放器參數結束 38 }; 39 var params={bgcolor:'#000000',allowFullScreen:true,allowScriptAccess:'always'};//這里定義播放器的其它參數如背景色（跟flashvars中的b不同），是否支持全屏，是否支持交互 40 var attributes={id:'ckplayer_a1',name:'ckplayer_a1'}; 41 //下面一行是調用播放器了，括號里的參數含義：（播放器文件，要顯示在的div容器，寬，高，需要flash的版本，當用戶沒有該版本的提示，加載初始化參數，加載設置參數如背景，加載attributes參數，主要用來設置播放器的id） 42 swfobject.embedSWF('ckplayer/ckplayer.swf', 'a1', '600', '400', '10.0.0','ckplayer/expressInstall.swf', flashvars, params, attributes); //播放器地址，容器id，寬，高，需要flash插件的版本，flashvars,params,attributes 43 //調用播放器結束 44 //第一部分：開關燈 45 var box = new LightBox('flashcontent'); 46 var $=function(id){return document.getElementById(id)}; 47 function closelights(){//關燈 48 box.Show(); 49 $('video').style.width='940px'; 50 $('video').style.height='550px'; 51 swfobject.getObjectById('ckplayer_a1').width=940; 52 swfobject.getObjectById('ckplayer_a1').height=550; 53 } 54 function openlights(){//開燈 55 box.Close(); 56 $('video').style.width='600px'; 57 $('video').style.height='400px'; 58 swfobject.getObjectById('ckplayer_a1').width=600; 59 swfobject.getObjectById('ckplayer_a1').height=400; 60 } 61 </script>
4.大功告成。。。。。
如果有不清楚的地方，請參考：
功能介紹： http://www.ckplayer.com/view.php?id=1
幫助手冊： http://www.ckplayer.com/article.php?id=1
使用實例[js篇] ：http://www.ckplayer.com/article.php?id=2