H5解決m3u8視訊直播流問題

摘要： 最近接觸了這一塊，簡單說下吧。 m3u8 是一種基於 HTTP Live Streaming 檔案視訊格式，它主要是存放整個視訊的基本資訊和分片(Segment)組成。目前 由 Apple.inc 率先提出的 HLS 協議在 Mac 的 Safari 上原生支援，你可以直接通過 v...

最近接觸了這一塊，簡單說下吧。

m3u8 是一種基於 HTTP Live Streaming 檔案視訊格式，它主要是存放整個視訊的基本資訊和分片(Segment)組成。目前 由 Apple.inc 率先提出的 HLS 協議在 Mac 的 Safari 上原生支援，你可以直接通過

video.src = 'xxx.m3u8'

來實現。

如果你希望相容所有的瀏覽器的話, 你需要知道 Chrome 和 Firefox 支援的 Media Source Extensions（ 非常不理想，在IE和國內具備相容模式的極速瀏覽器下） 的情況：

目前 Youtube 和 Netflix 等主流視訊網站，即使 FB 的 newsfeed 裡面的視訊也採用了 HLS 的解決方案，大致實現流程如下：

其核心，在於對於 m3u8 的檔案解析和 通過 XHR 去完成對分片內容二進位制檔案的獲取，然後使用 MSE 的 appendBuffer 去進行 buffer 的封裝，然後自己完成合流的工作。

目前國內的，bilibili 最早實現了基於 MSE 解決方案的播放器，大概為什麼他們必須用 MSE 而不是 優酷 和 騰訊 的 多 video 方案，可能是錢少，視訊轉MP4需要大量伺服器，當然 MSE 這是技術的趨勢。

前面廢話太多直接上推薦吧：

優先推薦 video.js 的方案，因為它支援多個播放核心，而且外掛非常多，你只需要使用

videojs/videojs-contrib-hls 就可以了。

再安利一個非常純粹的方案，就是 hls.js 它需要你手進行 video 的繫結。

75 Team 也開源 的一個播放器： Chimeejs/chimee

當然我們 team 也會開源一款類似 youtube 的播放核心。