摘要：和格式的瀏覽器兼容性移動(dòng)端因?yàn)樘O果公司對(duì)的強(qiáng)烈抵制以及自己定的視頻協(xié)議，所以在端原生支持格式的視頻播放而不支持的播放，而且因?yàn)樘O果在移動(dòng)端的領(lǐng)頭作用，所以其他移動(dòng)端包括瀏覽器也都原生支持格式的視頻播放。

因?yàn)檎`打誤撞來(lái)到了淘寶直播團(tuán)隊(duì)，從開始完全不了解直播技術(shù)，現(xiàn)在因?yàn)閘eader暫時(shí)的離開，準(zhǔn)備接手h5播放器的迭代，就不得不開始了解相關(guān)的視頻技術(shù)，先整理一下在直播技術(shù)中的視頻格式和不同瀏覽器的兼容性。

直播技術(shù)一般有兩種協(xié)議方式，分別是HLS和RTMP，兩種協(xié)議分別的解釋我就摘抄了一個(gè)博主的解釋

HLS ，是蘋果公司實(shí)現(xiàn)的基于 HTTP 的流媒體傳輸協(xié)議，全稱 HTTP Live Streaming，可支持流媒體的直播和點(diǎn)播，主要應(yīng)用在 iOS 系統(tǒng)，為 iOS 設(shè)備（如 iPhone、iPad）提供音視頻直播和點(diǎn)播方案。

RTMP ，實(shí)時(shí)消息傳輸協(xié)議，Real Time Messaging Protocol，是 Adobe Systems 公司為 Flash 播放器和服務(wù)器之間音頻、視頻和數(shù)據(jù)傳輸開發(fā)的開放協(xié)議。協(xié)議基于 TCP，是一個(gè)協(xié)議族，包括 RTMP 基本協(xié)議及 RTMPT/RTMPS/RTMPE 等多種變種。RTMP 是一種設(shè)計(jì)用來(lái)進(jìn)行實(shí)時(shí)數(shù)據(jù)通信的網(wǎng)絡(luò)協(xié)議，主要用來(lái)在 Flash/AIR 平臺(tái)和支持RTMP協(xié)議的流媒體/交互服務(wù)器之間進(jìn)行音視頻和數(shù)據(jù)通信。

總結(jié)下來(lái)就是RTMP是Adobe公司推出的基于flash的實(shí)時(shí)視頻消息傳輸協(xié)議，服務(wù)端和用戶端通過(guò)flash建立長(zhǎng)鏈接，并實(shí)時(shí)進(jìn)行消息的推送、傳輸和接收然后播放，對(duì)應(yīng)的視頻播放格式是flv。而HLS就是apple公司為了消滅flash（因?yàn)槔蠁桃恢币詠?lái)對(duì)flash的抵制和ios對(duì)flash的不支持）自己定義的一套替代flash的視頻解決方案。服務(wù)器和用戶端通過(guò)不停的接收視頻片段（每個(gè)片段都通過(guò)一次http請(qǐng)求）來(lái)播放，對(duì)應(yīng)的視頻播放格式是m3u8，其中m3u8只是一個(gè)表示視頻片段地址的純文本，用來(lái)加載一個(gè)個(gè)的.ts視頻文件。

HLS和RTMP的利弊

兩種協(xié)議各有利弊，具體的在本篇中不展開了，就我所知的RTMP協(xié)議延遲低，協(xié)議本身設(shè)計(jì)簡(jiǎn)潔，適合實(shí)時(shí)性較高的網(wǎng)絡(luò)直播，HLS是http請(qǐng)求，所以可以用cdn緩存等方式加快傳輸，但是因?yàn)槭且曨l片段，容易被跳過(guò)，所以如果有強(qiáng)制廣告要求的話也可能被跳過(guò)。但是RTMP因?yàn)檎加玫木W(wǎng)絡(luò)端口是1935，如果以后瀏覽器的一些新安全機(jī)制就有可能block所有80端口以外的連接，也有安全性問(wèn)題。

移動(dòng)端

因?yàn)樘O果公司對(duì)flash的強(qiáng)烈抵制以及自己定的視頻協(xié)議，所以在ios端原生支持m3u8格式的視頻播放而不支持flv的播放，而且因?yàn)樘O果在移動(dòng)端的領(lǐng)頭作用，所以其他移動(dòng)端包括android瀏覽器也都原生支持m3u8格式的視頻播放。

PC端

pc端因?yàn)闅v史原因，在hls之前都是用flash播放視頻，后來(lái)隨著html5的普及，可以用原生的video標(biāo)簽來(lái)播放mp4、ogg、webm等視頻格式的播放，但是對(duì)于直播格式m3u8（除了safari）和flv都不能支持播放。所以現(xiàn)在pc端普遍的做法還是通過(guò)flash來(lái)播放m3u8和flv格式的視頻。

MSE

但是因?yàn)閒lash的淘汰正在加速，也比較有決心，比如我就發(fā)現(xiàn)現(xiàn)在chrome播放flash視頻已經(jīng)要手動(dòng)點(diǎn)擊允許了。加上media source extention在高端瀏覽器已經(jīng)被支持，就可以直接在瀏覽器端就實(shí)現(xiàn)視頻格式的轉(zhuǎn)換。MSE是一個(gè)可以通過(guò)js控制瀏覽器視頻源文件的api，有了這個(gè)api我們就可以通過(guò)js在瀏覽器端對(duì)視頻進(jìn)行轉(zhuǎn)碼及處理并提供給video標(biāo)簽了。B站已經(jīng)開源了一個(gè)flv播放器flv.js，原理就是通過(guò)解析視頻源，然后進(jìn)行視頻源解碼轉(zhuǎn)換成mp4格式，然后通過(guò)mse丟在video原生標(biāo)簽里播放，同理也有hls.js對(duì)m3u8格式的視頻進(jìn)行轉(zhuǎn)碼在pc端播放。