Hls: 播放 m3u8 及 自定義m3u8 內容

1. 什麼是HSL？

HLS 的工做原理是把整個流分紅一個個小的基於 HTTP 的文件來下載，每次只下載一些。當媒體流正在播放時，客戶端能夠選擇從許多不一樣的備用源中以不一樣的速率下載一樣的資源，容許流媒體會話適應不一樣的數據速率。在開始一個流媒體會話時，客戶端會下載一個包含元數據的 extended M3U (m3u8) playlist文件，用於尋找可用的媒體流。（轉載自：Eduve.org）

2. 如何播放？

 1. 可使用 hls.js 播放。

 2. 使用播放器插件：DPlayer , 使用過程比較方便簡單，可是也須要依賴hls.js 。 下面代碼使用該插件播放。 

3. 示例代碼

  Dplayer 簡單配置:

const dp = new DPlayer({
    container: document.getElementById('dplayer'), // 播放容器
    screenshot: true, // 開啓截圖功能
    video: {
        url: 'demo.mp4', // 播放視頻地址
        pic: 'demo.jpg', // 封面
        thumbnails: 'thumbnails.jpg' // 縮略圖
    }
});複製代碼

 Vue:  切記放在 mounted 內

播放 Hls 還須要下載 hls.js 依賴。 並初始化。  代碼中的type 則是視頻類型。

支持類型：'auto'，'hls'，'flv'，'dash'，'webtorrent'，'normal'或其餘自定義類型 詳情看Dplayer 官網說明。 

播放很簡單。 傳入 m3u8 的播放地址便可。

4. 本地自定義 m3u8 播放內容

m3u8 定義文件格式，點擊查看。 下面類型轉載自（簡書-Whyn），前面就是他的介紹連接。

▷ EXTM3U：代表該文件是一個 m3u8 文件。每一個 M3U 文件必須將該標籤放置在第一行。
▷ EXT-X-VERSION：表示 HLS 的協議版本號，該標籤與流媒體的兼容性相關。該標籤爲全局做用域，使能整個 m3u8 文件；每一個 m3u8 文件內最多隻能出現一個該標籤訂義。若是 m3u8 文件不包含該標籤，則默認爲協議的第一個版本。

▷EXT-X-TARGETDURATION：表示每一個視頻分段最大的時長（單位秒）。該標籤爲必選標籤。

▷ EXTINF：表示其後 URL 指定的媒體片斷時長（單位爲秒）。每一個 URL 媒體片斷以前必須指定該標籤。該標籤的使用格式爲： #EXTINF:<duration>,[<title>],其中，參數 duration能夠爲十進制的整型或者浮點型，其值必須小於或等於 EXT-X-TARGETDURATION 指定的值（注：建議始終使用浮點型指定時長，這可讓客戶端在定位流時，減小四捨五入錯誤。可是若是兼容版本號 EXT-X-VERSION 小於 3，那麼必須使用整型）。

連接則是 ts 文件。 由於涉及跨域，我這裏把它下載下來了。 文件示例

▷ ENDLIST: 表示m3u8 結束符

這裏先建立一個m3u8的文本內容， 而後轉爲 Blob 對象。再使用 URL 轉換爲 blob 地址。就能夠播放了。

若是以爲這篇文章對你有幫助，請瞄準你的左鍵，瘋狂點擊它，謝謝。

轉載請註明出處，感謝配合。