瀏覽器使用的是 m3u8 文件。m3u8 跟音頻列表格式 m3u 很像，可以簡單的認為 m3u8 就是包含多個 ts 文件的播放列表。播放器按順序逐個播放，全部放完再請求一下 m3u8 文件，獲得包含最新 ts 文件的播放列表繼續播，周而復始。整個直播過程就是依靠一個不斷更新的 m3u8 和一堆小的 ts 文件組成，m3u8 必須動態更新，ts 可以走 CDN。一個典型的 m3u8 文件格式如下：
可以看到 HLS 協議本質還是一個個的 HTTP 請求 / 響應，所以適應性很好，不會受到防火墻影響。但它也有一個致命的弱點：延遲現象非常明顯。如果每個 ts 按照 5 秒來切分，一個 m3u8 放 6 個 ts 索引，那么至少就會帶來 30 秒的延遲。如果減少每個 ts 的長度，減少 m3u8 中的索引數，延時確實會減少，但會帶來更頻繁的緩沖，對服務端的請求壓力也會成倍增加。所以只能根據實際情況找到一個折中的點。
對于支持 HLS 的瀏覽器來說，直接這樣寫就能播放了：
打開網易新聞 查看精彩圖片
注意：HLS 在 PC 端僅支持瀏覽器，類似瀏覽器使用HTML5 video標簽無法播放 m3u8 格式，可直接采用網上一些比較成熟的方案，如：-、、--hls、。
2. Real Time
Real Time （簡稱 RTMP）是 開發的一套視頻直播協議，現在屬于 Adobe。這套方案需要搭建專門的 RTMP 流媒體服務如 Adobe Media ，并且在瀏覽器中只能使用 Flash 實現播放器。它的實時性非常好用h5播放器的視頻網站，延遲很小，但無法支持移動端 WEB 播放是它的硬傷。
雖然無法在iOS的H5頁面播放，但是對于iOS原生應用是可以自己寫解碼去解析的, RTMP 延遲低、實時性較好。
瀏覽器端，HTML5 video標簽無法播放 RTMP 協議的視頻，可以通過 video.js 來實現。
打開網易新聞 查看精彩圖片
3. 視頻流協議HLS與RTMP對比
打開網易新聞 查看精彩圖片
二、直播形式
打開網易新聞 查看精彩圖片
目前直播展示形式，通常以YY直播、映客直播這種頁面居多，可以看到其結構可以分成三層：① 背景視頻層 ② 關注、評論模塊 ③ 點贊動畫
而現行H5類似直播頁面用h5播放器的視頻網站，實現技術難點不大，其可以通過實現方式分為：① 底部視頻背景使用video視頻標簽實現播放 ② 關注、評論模塊利用 來實時發送和接收新的消息通過DOM 和 CSS3 實現 ③ 點贊利用 CSS3 動畫
了解完直播形式之后，接下來整體了解直播流程。
三、直播整體流程
直播整體流程大致可分為：
打開網易新聞 查看精彩圖片
四、H5 錄制視頻
對于H5視頻錄制，可以使用強大的 （Web Real-Time ）是一個支持網頁瀏覽器進行實時語音對話或視頻對話的技術，缺點是只在 PC 的 上支持較好，移動端支持不太理想。
1. 使用 錄制視頻基本流程
① 調用 ..() 獲取用戶的PC攝像頭視頻數據。
② 將獲取到視頻流數據轉換成 .ion (一種視頻流數據格式)。
③ 利用 將視頻流數據傳輸到服務端。
注意：雖然一直在推，目前已有不少成型的產品出現，但是大部分移動端的瀏覽器還不支持 （最新iOS 10.0也不支持），所以真正的視頻錄制還是要靠客戶端（iOS,）來實現,效果會好一些。
打開網易新聞 查看精彩圖片
2. iOS原生應用調用攝像頭錄制視頻流程
① 音視頻的采集，利用和可以采集到原始的音視頻數據流。
② 對視頻進行H264編碼，對音頻進行AAC編碼，在iOS中分別有已經封裝好的編碼庫（x264編碼、faac編碼、編碼）來實現對音視頻的編碼。
③ 對編碼后的音、視頻數據進行組裝封包。
④ 建立RTMP連接并上推到服務端。
打開網易新聞 查看精彩圖片
五、搭建Nginx+Rtmp直播流服務
1. 安裝nginx、nginx-rtmp-
① 先clone nginx項目到本地：
brew tap /nginx
② 執行安裝nginx-rtmp-
brew nginx-full --with-rtmp-
2. nginx.conf配置文件，配置RTMP、HLS
查找到nginx.conf配置文件（路徑/usr/local/etc/nginx/nginx.conf），配置RTMP、HLS。