JS進(jìn)階篇--ckplayer.js視頻播放插件

tangr206 發(fā)布于2019-08-21 10:38 / 3024人閱讀

摘要：，是否自動播放，可以為或，默認(rèn)為，參數(shù)不為時播放器加載完成后均為暫停狀態(tài)。，視頻開始前廣告播放的秒數(shù)，只針對或圖片有效，默認(rèn)為。，視頻結(jié)束后的動作，停止播放并發(fā)送，是不發(fā)送且重新循環(huán)播放，停止播放，默認(rèn)為。

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

可調(diào)用flash也可以調(diào)用html5播放器：

CKobject.embed(

"flash播放器文件路徑",

"容器ID",

"播放器的ID",

"寬度，可以是百分比",

"高度，可以是百分比",

優(yōu)先調(diào)用設(shè)置，false=優(yōu)先調(diào)用flash播放器，true=優(yōu)先調(diào)用HTML5播放器

flash播放器的初始化參數(shù)，以及HTML5初始化參數(shù)，比如默認(rèn)播放/暫停等設(shè)置，詳細(xì)的可以參考【flashvars里各參數(shù)的說明】這一版塊

HTML5視頻播放地址，數(shù)組形式，詳細(xì)的可參考HTML5視頻調(diào)用的說明

)

只調(diào)用flash播放器：

CKobject.embedSWF("flash播放器路徑",

"放置播放器的容器ID",

"播放器的ID",

"寬度，支持百分比",

"高度，支持百分比",

flashvars對象，初始化播放器參數(shù),

相關(guān)的配置，如：背景色，是否允許全屏，是否允許交互，播放器是否透明

);

只調(diào)用HTML5播放器：

CKobject.embedHTML5("放置播放器的容器的ID",

"播放器ID",

"寬高，支持百分比",

"高度，支持百分比",

視頻地址，數(shù)組，因為不同的平臺支持的視頻格式不同，所以需要盡量多的視頻格式來兼容,

初始化配置參數(shù)，比如默認(rèn)是否播放,

在哪些平臺上使用，all是指全部平臺都調(diào)用

);

其中flashvars中的參數(shù)如下：

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

下面貼一個實例代碼：

html代碼：

css代碼：

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

js代碼：

結(jié)果截圖如下如下：

需要demo猛點該文字，百度云盤下載

注：如果是flash播放優(yōu)先，如果flashvars的屬性p的值為0時，表示為暫停狀態(tài)，點擊播放按鈕時，屏幕中間的播放按鈕不會消失，需要放到環(huán)境里面查看效果，就不會出現(xiàn)該情況。

如果有需求去掉ckplayer播放器右邊的開關(guān)燈分享插件，會有專門的文章整理出來關(guān)于去掉該插件的，該百度網(wǎng)盤中已經(jīng)是去掉播放器右邊的開關(guān)燈分享插件的。

參考地址：

ckplayer官網(wǎng)：http://www.ckplayer.com/
參數(shù)介紹鏈接：http://www.fufuok.com/demo/ck...

GPU云服務(wù)器云服務(wù)器 js視頻播放插件 js播放視頻插件 js插件播放視頻 js視頻播放器插件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85923.html

發(fā)表評論

登陸后可評論

0條評論

tangr206

男|高級講師

我要關(guān)注我要私信

TA的文章

震驚了！鴻蒙又多了一種開發(fā)方式Ets，讓更多的人趕上紅利！

閱讀 3146·2021-10-12 10:11
#大硬盤#AlphaVPS：2核/2G/1T HDD/3T流量/1Gbps/保加利亞/月付€5

閱讀 1848·2021-08-16 10:59
《CSS揭秘》-背景與邊框

閱讀 2860·2019-08-30 15:55
HTML拾遺

閱讀 1235·2019-08-30 14:19
使用Hexo+Github搭建屬于自己的博客

閱讀 2045·2019-08-29 17:03
mpvue的自定義組件中運行$emit函數(shù)時輸入框光標(biāo)抖動的解決辦法

閱讀 2477·2019-08-29 16:28
如何不花錢實現(xiàn)簡單的短信驗證功能

閱讀 3229·2019-08-26 13:47
異步的JavaScript

閱讀 2893·2019-08-26 13:36

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JS進(jìn)階篇--ckplayer.js視頻播放插件

相關(guān)文章

**JS進(jìn)階篇--ckplayer播放器去掉右邊的開關(guān)燈分享插件**

ckplayer 網(wǎng)頁視頻播放插件

ckplayer 網(wǎng)頁視頻播放插件

前端技術(shù) 博客文章、書籍積累

前端技術(shù) 博客文章、書籍積累

發(fā)表評論

0條評論

tangr206

男|高級講師

TA的文章

震驚了！鴻蒙又多了一種開發(fā)方式Ets，讓更多的人趕上紅利！

#大硬盤#AlphaVPS：2核/2G/1T HDD/3T流量/1Gbps/保加利亞/月付€5

《CSS揭秘》-背景與邊框

HTML拾遺

使用Hexo+Github搭建屬于自己的博客

mpvue的自定義組件中運行$emit函數(shù)時輸入框光標(biāo)抖動的解決辦法

如何不花錢實現(xiàn)簡單的短信驗證功能

異步的JavaScript

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JS進(jìn)階篇--ckplayer.js視頻播放插件

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！