淺談基于HTML5的在線視頻播放方案

如今在這個(gè)特殊的時(shí)代下：flash將死未死，微軟和IE的歷史問題，html5標(biāo)準(zhǔn)未定，蘋果和谷歌的閉源和開源之爭(zhēng)，移動(dòng)互聯(lián)網(wǎng)的大勢(shì)所趨，瀏覽器各自為戰(zhàn)…這些都導(dǎo)致web開發(fā)者在設(shè)計(jì)視頻解決方案的時(shí)候相當(dāng)困惑。本文圍繞這個(gè)主題，來探討一下相關(guān)的技術(shù)，原理和工具。

編碼與格式的誤區(qū)
很多人將編碼和格式誤認(rèn)為是同一個(gè)東西，往往以視頻文件的后綴來唯一確定視頻文件的支持程度。而事實(shí)上，用一句話來概括就是：視頻的文件后綴（假設(shè)沒有惡意修改后綴）實(shí)際上代表一種封裝格式，而視頻或者音頻的編碼算法與封裝格式本身無直接的關(guān)系：同樣的封裝格式（即同樣的后綴）可以封裝不同編碼算法的視頻和音頻。而視頻播放設(shè)備或軟件是否支持視頻的播放，不僅僅要看封裝格式，還要看編碼算法。認(rèn)清這一點(diǎn)是理解和排查問題的基礎(chǔ)。

封裝格式規(guī)定了視頻的所有內(nèi)容，包括圖像，聲音，字幕，系統(tǒng)控制等，其中以圖像和聲音最為關(guān)鍵。

從MPEG說起
MPEG是一個(gè)定義視頻規(guī)格的國(guó)際組織，他們?cè)?jīng)推出的MPEG-1和MPEG-2實(shí)際上分別就是大家熟知的VCD和DVD，不過這都是遠(yuǎn)古的東西了。我們來看看跟本文主題有關(guān)的MPEG-4規(guī)范。

MPEG-4規(guī)范規(guī)定了文件后綴名為.mp4，目前包括三種圖像編碼和壓縮算法：Xvid\DivX\AVC(H.264)，其中Xvid和DivX也可以統(tǒng)稱為MPEG-4 Part 2或者M(jìn)PEG-4 Visual，而更為知名的H.264和AVC是相同的概念。音頻方面則是AAC。以下關(guān)于兼容的內(nèi)容，來源于維基百科和格式工廠以及筆者的測(cè)試：

Android瀏覽器：支持DivX和AVC，Xvid應(yīng)該不支持
iPhone和iPad（iOS）：支持DivX和AVC，Xvid不支持
Chrome：支持AVC，不支持DivX和Xvid。谷歌曾在2011年初宣布由于許可問題，將移除Chrome瀏覽器對(duì)AVC(H.264)的支持。但是直到目前的版本，AVC還在被支持。另外，實(shí)際測(cè)試下來，如果是DivX和AAC封裝在mp4中的話，chrome可以播放，但是只有聲音(AAC)。
Firefox和Opera：還是由于許可的問題，F(xiàn)irefox和Opera逐漸動(dòng)搖了對(duì)AVC的支持，筆者在最新的Firefox中測(cè)試AVC仍然可以播放（維基百科的解釋是可能與系統(tǒng)本身具有解碼器有關(guān)）；至于DivX和Xvid，筆者在Firefox下的測(cè)試結(jié)果是不支持。從維基百科的兼容列表看，Opera對(duì)AVC支持的不好。
IE：筆者的IE11能夠支持AVC，不支持DivX和Xvid
WebM的倡導(dǎo)
由于AVC(H.264)的授權(quán)問題，以Chrome、Firefox、Opera為首的開源陣營(yíng)開始動(dòng)搖對(duì)AVC的支持，盡管目前這些瀏覽器仍然能夠支持AVC，但是它們也傾向于一個(gè)叫做WebM的開源多媒體項(xiàng)目，該項(xiàng)目包括一個(gè)叫VP8的新的開源視頻編解碼方案。目前VP8已經(jīng)發(fā)展到了VP9。作為封裝格式的WebM具有.webm的后綴和video/webm的MIME類型。在音頻方面，可以使用Vorbis/Opus。從兼容性看，Chrome、Firefox、Opera對(duì)VP8的兼容性相當(dāng)理想，但是Safari和IE幾乎無法支持。

開源的Ogg
Ogg幾乎與WebM相同，開源，被廣泛的在開源平臺(tái)支持。其視頻編碼方案稱為Theora(有VP3發(fā)展而來，由Xiph.org基金會(huì)開發(fā)，可被用于任何封裝格式)，音頻為Vorbis。后綴通常為.ogv或.ogg，MIME類型為video/ogg。在兼容性上，Chrome、Firefox、Opera能夠支持（但是Opera在移動(dòng)平臺(tái)上無法支持），但是Safari和IE幾乎無法支持。

Html5方案
以上的討論實(shí)際上的大前提是：視頻基于Html5的<video>方案?，F(xiàn)在我們來總結(jié)一下兼容性：

*IE9 “只有當(dāng)用戶安裝了VP8的編解碼器時(shí)”才能支持VP8。

‡Google Chrome 2011年宣布 放棄H.264, 但是“還沒兌現(xiàn)”。 可以看出現(xiàn)在主流的仍然是MP4(AVC)，但是為了解決“開源陣營(yíng)”對(duì)AVC的搖擺不定，可以選擇利用video的多源方案，在AVC的基礎(chǔ)上額外提供對(duì)webm或ogg的支持：

瀏覽器會(huì)根據(jù)自己的偏好來選擇具體加載那種格式的流媒體文件，當(dāng)然服務(wù)端必須對(duì)同一個(gè)視頻提供多種格式的支持，具體可以這么做：

提供一個(gè)WebM的視頻版本（VP8+Vorbis）
提供一個(gè)MP4的視頻版本（H.264+AAC(low complexity)）
提供Ogg版本（Theora+Vorbis）
服務(wù)端推薦使用nginx，盡量注意MIME類型的配置正確

舊版本的IE和flash
在html5流行之前，通用的視頻播放解決方案是flash和flv（flash從9開始支持h.264的mp4）。但是隨著ios設(shè)備的流行，flash已經(jīng)不是萬能藥了，越來越多的視頻網(wǎng)站提供多元的解決方案，而且偏向于html5：也就是說，通過檢測(cè)agent是否支持html5來決定使用video還是flash。在面對(duì)IE8以下的瀏覽器時(shí)，flash幾乎是唯一的選擇(silverlight的接受度普遍不高)。

當(dāng)然針對(duì)flash和flv的方案，也有多種實(shí)現(xiàn)方法，筆者能夠想到的有如下兩種：

服務(wù)端根據(jù)agent的類型，輸出不同的html，如果支持html5就輸出video+mp4(avc)和webm（或者ogg），否則輸出flash相關(guān)的標(biāo)簽或腳本
使用html5shiv和html5-video是IE也能夠支持video標(biāo)簽，并且使用Flash播放器來代替原生的video播放。
將object內(nèi)嵌在video中：