一、直播流程圖
流程圖如上所示，各位看官應該不難理解吧。其中H.264是對視頻的編碼,AAC是對音頻的編碼。
格式與瀏覽器的兼容模式如下：
mp4格式就不需要多說了，webm是一種流式的視頻格式，這兩種視頻格式偏點播。hls格式，嚴格意義上來講，不是一種視頻格式，而是一種視頻協議，對於視頻格式來說，hls是ts文件，即“.ts”格式，flv是早期的flash的一種格式，B站的H5播放器和Flash播放器都能播放flv格式的。hls和flv是偏直播的播放形式，當然也可以做點播。
二、直播協議
1. HLS協議
hls協議是蘋果推出的直播協議，對應hls格式，即“.ts”。工作原理圖如下：
對於hls協議來說，它會首先發放一個m3u8索引文件，video在一般瀏覽器中不支持m3u8文件的識別，safari中可以。video拿到m3u8文件，它會對其進行解析，解析的內容就爲圖中所示的m3u8中的segment.ts文件，每一個片段即爲直播流的分段。
直播是實時的，所以m3u8文件肯定不會是固定的，給的m3u8文件只是當前時間段的索引，segment.ts都會有個時長，在segment總時長之前，video會重新向服務器請求m3u8文件，這是瀏覽器自身的行爲，此時，服務器會返回新的m3u8文件，更新後的segment.ts文件將會改變，可能是2345或者34567等等。
另外，m3u8文件結構並不一定全是由ts文件組成，有可能會嵌套一層m3u8文件，如下所示：
如果m3u8文件中包含m3u8文件，就對應的是master playlist，如果拿到的m3u8文件裏只包含ts文件，那就對應的是media playlists。
m3u8文件可以細分爲：
live playlists 動態列表
主要用於直播中，m3u8文件會實時更新，m3u8中的內容如下：
第一行表明m3u8的版本，version爲版本的聲明，默認爲3，targetduration爲視頻的時長，sequence爲序號，m3u8文件每變化一次，序號都要加一，9.901代表着下面索引的片斷中的視頻時長大概多少時間。
event playlist 靜態列表
該列表在直播行業幾乎是用不到的。靜態列表的內容如下:
跟動態列表的區別就在於多了event這個選項參數，代表它是靜態。
vod playlist 全量列表
vod含義爲點播的意思，即從m3u8文件拿到起，內容就不再變化了。
VOD表明點播，告訴瀏覽器我這是點播，不用去請求新的m3u8文件，EXT-X-ENDLIST表明結束。
ts文件結構
ts文件結構如下所示：
瀏覽器解析一個視頻，需要知道視頻幀，音頻幀。對於每個ts文件來說，第一個ts文件會有一個PAT的包，解析時，這個pat的包會告訴你去找一個PMT的包，PMT會告訴你後面要解析到的ts文件中，哪些是視頻哪些是音頻，分類後，相連的ts包會組成一個幀，再相連再組成一個幀。至於哪些ts包能組成一個幀，這就需要解析ts規範了，ts中有個handler會告訴你這些信息。
2. RTMP協議
RTMP是Real Time Messaging Protocol（實時消息傳輸協議）的首字母縮寫，該協議基於TCP，是一個協議族，包括RTMP基本協議及/RTMPT/RTMPS/RTMPE等多種變種。RTMP是一種設計用來進行實時數據通信的網絡協議，主要用來在Flash、AIR平臺和支持RTMP協議的流媒體/交互服務器之間進行音頻和數據通信。傳統的軟件跟服務器之間的交互，還是用rtmp協議爲主。傳輸的視頻格式爲flv，即爲“.flv”形式。
上圖中的源類似流程圖中採集的過程，用戶端到源這塊是走rtmp協議的話，源推CDN這塊是不變的，而CDN到用戶這塊，走rtmp協議的話，是走TCP方式的。另外，rtmp協議傳輸過程中是flv視頻格式的，只是通信手段不一樣，hls協議中，是採用http協議。如果客戶端直接走TCP，通信的應答方式在用戶端程序端要考慮一些相關問題。
3. HTTP-FLV協議
HTTP-FLV可理解爲RTMP的升級版本，傳輸的視頻格式同rtmp一樣爲flv格式。RTMP用起來比HLS複雜些，但HLS實時性相對差些，有延時。延時跟1個m3u8文件下有幾個ts索引文件有關係，需要切分片來降低延時。
HTTP-FLV結合了HLS的優點，採用HTTP請求，又結合了RTMP低延時的特性，因爲中間建立了FLV的長連接，中間通信過程相對RTMP協議就不再複雜。相對RTMP協議來說，其優點可總結爲：
1）可以在一定程度上避免防火牆的干擾（例如，有的機房只允許80端口通過）
2）可以很好的兼容HTTP302跳轉，做到靈活調度
3) 可以使用HTTPS做加密通道
4) 很好的支持移動端
最後，本文就是大概描述了下直播流程中用到的一些協議原理，各位看官可以對應尋找相應知識點。若是未接觸過直播行業的前端人員想簡單入門直播，瞭解直播開發流程以及怎麼製作簡單的直播流來調試video，可以參考下面這課程：
http://coding.imooc.com/class/212.html?mc_marking=3c455cbba442021f00f45332ab6368ef&mc_channel=banner