ckplayer.js視頻播放插件

網頁中常見的功能就是播放視頻，下面介紹的這個ckplayer.js既可以在pc端播放，也可以在手機網頁上播放。

可調用flash也可以調用html5播放器

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        f:'http://movie.ks.js.cn/flv/other/1_0.mp4',
        c:0,
        loaded:'loadedHandler'
    };
    var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
    CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video);
</script>

CKobject.embed(...)里面的參數依次分別為：

• flash播放器文件路徑；
• 容器ID；
• 播放器的ID；
• 寬度：可以是百分比；
• 高度：可以是百分比；
• 優先調用設置：false=優先調用flash播放器，true=優先調用HTML5播放器；
• flash播放器的初始化參數，以及HTML5初始化參數：比如默認播放/暫停等設置，詳細的可以參考【flashvars里各參數的說明】這一版塊；
• HTML5視頻播放地址：數組形式，詳細的可參考HTML5視頻調用的說明。

只調用flash播放器

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        f:'http://movie.ks.js.cn/flv/other/1_0.flv',
        c:0,
        b:1
    };
    var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
    CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params); 
</script>

CKobject.embedSWF(...)里面的參數依次分別為：

• flash播放器路徑；
• 放置播放器的容器ID；
• 播放器的ID；
• 寬度：支持百分比；
• 高度：支持百分比；
• flashvars對象：初始化播放器參數；
• 相關的配置：如背景色，是否允許全屏，是否允許交互，播放器是否透明。

只調用HTML5播放器

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        p:1,
        e:1
    };
    var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4','http://www.ckplayer.com/webm/0.webm->video/webm','http://www.ckplayer.com/webm/0.ogv->video/ogg'];
    var support=['all'];
    CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
</script>

CKobject.embedHTML5(...)里面的參數依次分別為：

• v：ckplayer_volume，視頻默認音量 0-100 之間，默認為 85。
• p：ckplayer_play，是否自動播放，可以為 1 或 0，默認為 1，參數不為 1 時播放器加載完成后均為暫停狀態。
• f：ckplayer_flv，視頻地址，默認為空，可以是單獨視頻地址、url 地址列表文件、xml 地址列表文件、Flash 地址文件這四種情況。（注意對應修改 s 參數的值，即 ckplayer_style）
• i：ckplayer_loadimg，視頻播放器初始圖片地址，即封面圖片，默認為空。
• d：ckplayer_pauseflash，暫停時播放的廣告，只支持 Flash 和圖片，默認為空。
• u：ckplayer_pauseurl，暫停時播放廣告圖片的鏈接地址，默認為空。
• l：ckplayer_loadadv，視頻開始前播放的廣告，可以是 圖片/Flash/視頻格式，默認為空。
• r：ckplayer_loadurl，視頻開始前廣告的鏈接地址，主要針對視頻廣告，如果是 Flash 廣告可以不填寫，默認為空。
• t：ckplayer_loadtime，視頻開始前廣告播放的秒數，只針對 Flash 或圖片有效，默認為 0。
• e：ckplayer_endstatus，視頻結束后的動作，0 停止播放並發送js，1 是不發送 js 且重新循環播放，2 停止播放，默認為2。當為 0 時需要自定義函數：function playerstop(){alert("播放完成");}
• a：ckplayer_pat，只有在使用 Flash 加密地址傳遞時有效，需要 f 和 s 參數配合，以及你自定義的 geturl.swf 文件配合，f：ckplayer_flv 參數也可以為 getflv.php?id=[$pat] 這樣的格式，相當於 Flash 加密地址傳遞，其中的 pat 是有效的,可以通過這里傳遞參數后得到視頻播放地址給播放器。
• s：ckplayer_style，f 參數的傳遞方式，0 是普通視頻地址，1 是視頻地址列表文件，2 是 xml 地址列表文件，3 是 Flash 加密地址解析，默認為 0 普通視頻地址文件播放。
• x：ckplayer_xml，皮膚配置文件，如果為空的話將使用 js 文件配置，默認為官方皮膚 ckplayer.xml，要修改為其他皮膚只需要下載后改這個文件名就可以了，比如網易皮膚 ckplayer_163.xml。
• c：ckplayer_default，讀取文本配置，此參數具有非常強大的功能，非 0 值時調用本地 ckplayer.txt 配置文件（比如外站引用視頻只需一個參數即可）說來話長，請到網站了解詳情。
• b：ckplayer_bgcolor，該參數以適應站外調用時有些論壇自動設置透明度的問題。
• h：ckplayer_http，默認為0，定義 http 視頻流采用按關鍵幀拖動還是按關鍵時間點拖動，0是按關鍵幀，1是按關鍵時間點。
• m：ckplayer_load，默認為0，為1時不自動加載視頻，選擇是否采用點擊播放按鈕時再加載視頻，這個參數的功能是在同頁面加載多個視頻時，有些視頻可以先不加載，省帶寬。
• g：ckplayer_start，默認為0，開頭跳過時間，這兩個參數可以定義按指定時間進行播放的功能和提前結束的功能，該功能的用處一是可以記錄用戶已播放到的時間下次打開該視頻時直接從指定時間進行播放,二是可以做跳過片頭和片尾的功能。
• j：ckplayer_ending，同上，默認為0，提前結束時間。
• o：附加參數，非 CKplayer 官方參數，可選，默認值為 0，當值為 1 時，可加載站外視頻 Flash 地址，如優酷分享中的 Flash 地址等，相當於使用 <embed> 標簽加載站外 Flash 視頻。

下面貼一個實例代碼：

html代碼：

<div id="video_c"></div>

css代碼：

 #video_c{ width:840px; height:353px;margin:0 auto;}

js代碼：

<script type="text/javascript" src="ckplayer/ckplayer.js"></script>
<script type="text/javascript">

var flashvars={
    f:'ckplayer/video/1_0.flv',
    p:0
    //i：'http://www.ckplayer.com/static/images/letitgo.jpg' //視頻播放器初始圖片地址，即封面圖片，默認為空。
    };
var video=['ckplayer/video/1_0.mp4->video/mp4'];
CKobject.embed('ckplayer/ckplayer.swf','video_c','ckplayer_a1','100%','100%',false,flashvars,video);

</script>

結果截圖如下如下：

需要demo猛點該文字，百度雲盤下載 提取碼：z9m3

參考地址：

• ckplayer官網：http://www.ckplayer.com/
• 參數介紹鏈接：http://www.fufuok.com/demo/ckplayer/z.html