JS進階篇--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('放置播放器的容器的ID',

'播放器ID',

'寬高，支持百分比',

'高度，支持百分比',

視頻地址，數組，由於不一樣的平臺支持的視頻格式不一樣，因此須要儘可能多的視頻格式來兼容,

初始化配置參數，好比默認是否播放,

在哪些平臺上使用，all是指所有平臺都調用

);

其中flashvars中的參數以下：

/**
注意，flashvars中的參數：
    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猛點該文字，百度雲盤下載

注：若是是flash播放優先，若是flashvars的屬性p的值爲0時，表示爲暫停狀態，點擊播放按鈕時，屏幕中間的播放按鈕不會消失，須要放到環境裏面查看效果，就不會出現該狀況。

若是有需求去掉ckplayer播放器右邊的開關燈分享插件，會有專門的文章整理出來關於去掉該插件的，該百度網盤中已是去掉播放器右邊的開關燈分享插件的。

參考地址：

ckplayer官網：http://www.ckplayer.com/
參數介紹連接：http://www.fufuok.com/demo/ck...