【CKplayer】使用CKplayer插件在網頁中嵌入視頻的方法

在做網站中有時候我們需要在網頁中嵌入視頻，一般視頻嵌入有以下幾種方法：

1. 優酷代碼嵌入

    優點：簡單，方便，可靠。

    缺點：有廣告，現在的網站非常注重用戶體驗，如果打開一個在線視頻是有長廣告的一定會崩潰的。

2. 利用<object>標簽嵌入視頻

    優點：也比較方便，對於swf來說不錯。

    缺點：如果播放的是wmv格式，利用Chrome打開就搞笑了，有時候會提示你安裝media player插件，有時候連個提醒都沒有。也就是說跨瀏覽器的能力不足。

             不同的視頻格式還有不一樣的代碼，太繁瑣。

3. 利用<video>標簽

    優點：HTML5新標簽，對於手機端來說不錯

    缺點：HTML5<video>標簽只支持三種格式，還有編碼要求。另外如果要實現視頻控制，如：播放尺寸，色彩，播放拖曳還得另外寫js代碼。

4. 利用第三方播放插件CKplayer

    優點：支持大多數瀏覽器，還有視頻控制，分享，開關燈，插入廣告等等設置。如果你是js大牛還可以自行各種修改功能

    缺點：我實測下來支持ckplayer最好的格式是經過H.264編碼的MP4格式視頻。其他的格式或多或少有些小問題。

    官網地址：http://www.ckplayer.com

 

注意點：嵌入代碼前務必下載ckplayer相關文件夾並將其放在根目錄下

嵌入代碼：

<div id="a1"></div>
    <script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
    <script type="text/javascript">
        var flashvars = {
            f: '/Movie/123.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>

f:這里需要填入你的視頻地址；

注意src地址的正確性以及embed中第一項swf地址的正確性。

 

如果不想在頁面中暴露本地視頻的地址，可以采用：

 

想要去掉調整，分享，開關燈設置可以：

 

想修改播放器正中間的LOGO(載入播放器時會出現)，以及播放器右上角的LOGO可以：

更多的功能大家可以自行到官網查看開發手冊。我用的就是這么多功能。希望能給那些該用什么代碼在網站中嵌入視頻而煩惱的碼農一個方向。