網(wǎng)站備案入口營(yíng)銷活動(dòng)推廣策劃
CKplayer是一款基于Flash和HTML5技術(shù)的開源視頻播放器,支持多種格式的音視頻播放,并且具有優(yōu)秀的兼容性和擴(kuò)展性。
它不僅可以在網(wǎng)頁上播放本地或者網(wǎng)絡(luò)上的視頻,還可以通過代碼嵌入到網(wǎng)頁中,實(shí)現(xiàn)更加個(gè)性化的播放效果。CKplayer全稱為超酷flv播放器,它是一款用于網(wǎng)頁上播放視頻的軟件,支持的格式有:http協(xié)議上的flv,f4v,mp4格式,同時(shí)支持rtmp視頻流格式播放。
此播放器的特點(diǎn)在于用戶可以自己定義播放器的風(fēng)格,諸如播放/暫停按鈕,靜音按鈕,全屏按鈕都是以外部圖片接口形式調(diào)用,用戶根據(jù)自己的需要制作出播放器風(fēng)格所需要使用的各個(gè)按鈕圖片然后替換掉原始風(fēng)格里相應(yīng)的圖片就可以制作出自己的風(fēng)格了。
引入外部庫
<title>ckplayer調(diào)用演示-PC版</title><script type="text/javascript" src="ckplayer/hls.js/hls.min.js"></script><link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css"><script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>
創(chuàng)建自適應(yīng)DOM容器
<div class="video" style="width: 100vw;height: 100vh;"></div>
ckplayer封裝函數(shù)
function getHlsVideo(url) {var videoObject = {container: '.video', //容器的ID或classNameplug: 'hls.js',//設(shè)置使用hls插件screenshot: true,//截圖live: false,//直播 true false//backLive: false,rightBar: true,//右邊控制欄//smallWindows: true,//小窗口//webFull:true,//全屏//theatre:true,//劇場(chǎng)模式//controls:true,autoplay: true,title: 'HLS視頻展示聯(lián)播',volume: 0.5,//默認(rèn)音量為logo: 'logo.png',//video: url};new ckplayer(videoObject);}
設(shè)置清晰度視頻源
video: [[url, 'video/m3u8', '標(biāo)清', 0],['05cacb4e02f9d9e.mp4', 'video/mp4', '高清', 0]]
避免入坑
HLS播放兼容性
- HLS(HTTP Live
streaming),是基于HTTP的流媒體傳輸協(xié)議,由apple公司所提出的一種由于傳輸音視頻的協(xié)議交互方式,當(dāng)前HLS被廣泛應(yīng)用于視頻點(diǎn)直播領(lǐng)域。
HLS采用HTTP協(xié)議傳輸音視頻數(shù)據(jù),HLS通過將音視頻流切割成一個(gè)個(gè)小的TS切片及生成m3u8的播放列表文件,播放客戶端通過HTTP協(xié)議下載播放列表文件,按照播放列表文件制定的順序下載切片文件并播放,從而實(shí)現(xiàn)便下載邊播放 - HLS協(xié)議下,蘋果設(shè)備可以直接播放.m3u8的視頻,但是其他瀏覽器不能直接播放;
- 使用ckplayer開發(fā)播放器后,蘋果設(shè)備和手機(jī)端,無法直接播放;
- 在chrome瀏覽器預(yù)覽視頻時(shí),即便設(shè)置了自動(dòng)播放,也需要點(diǎn)擊播放按鈕。
@漏刻有時(shí)