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í)