文引用了微信公眾號(hào)“鮮棗課堂”的《視頻編碼零基礎(chǔ)入門(mén)》文章內(nèi)容。為了更好的內(nèi)容呈現(xiàn)，引用和收錄時(shí)內(nèi)容有改動(dòng)，轉(zhuǎn)載時(shí)請(qǐng)注明原文來(lái)源信息，尊重原作者的勞動(dòng)。

1、引言

如今我們所處的時(shí)代，是移動(dòng)互聯(lián)網(wǎng)時(shí)代，也可以說(shuō)是視頻時(shí)代。從快播到抖音，從“三生三世”到“延禧攻略”，我們的生活，被越來(lái)越多的視頻元素所影響。

而這一切，離不開(kāi)視頻拍攝技術(shù)的不斷升級(jí)，還有視頻制作產(chǎn)業(yè)的日益強(qiáng)大。

此外，也離不開(kāi)通信技術(shù)的飛速進(jìn)步。試想一下，如果還是當(dāng)年的56K Modem撥號(hào)，或者是2G手機(jī)，你還能享受到現(xiàn)在動(dòng)輒1080P甚至4K的視頻體驗(yàn)嗎？

除了視頻拍攝工具和網(wǎng)絡(luò)通信技術(shù)升級(jí)之外，我們能享受到視頻帶來(lái)的便利和樂(lè)趣，還有一個(gè)重要因素，就是視頻編碼技術(shù)的突飛猛進(jìn)。

視頻編碼技術(shù)涉及的內(nèi)容太過(guò)專業(yè)和龐雜，市面上的書(shū)籍或博客多數(shù)都只是枯燥的技術(shù)概念羅列，對(duì)于新手來(lái)說(shuō)讀完依舊蒙逼是常態(tài)，本文將借此機(jī)會(huì)，專門(mén)給大家做一個(gè)關(guān)于視頻編碼的零基礎(chǔ)科普。

▼ 本文涉及概念較多，為了方便閱讀，本文的內(nèi)容目錄對(duì)應(yīng)如下：

1、引言

2、系列文章

3、圖像基礎(chǔ)知識(shí)

3.1）什么是像素？

3.2）什么是PPI？

3.3）顏色在計(jì)算機(jī)里是如何表示的？

4、視頻編碼基礎(chǔ)知識(shí)

4.1）視頻和圖像和關(guān)系

4.2）未經(jīng)編碼的視頻數(shù)據(jù)量會(huì)有多大？

4.3）什么是編碼？

5、視頻編碼的實(shí)現(xiàn)原理

5.1）視頻編碼技術(shù)的基本原理

5.2）視頻編碼技術(shù)的實(shí)現(xiàn)方法

6、視頻編碼的國(guó)際標(biāo)準(zhǔn)

6.1）視頻編碼格式的標(biāo)準(zhǔn)化

6.2）視頻數(shù)據(jù)的封裝

（本文同步發(fā)布于：http://www.52im.net/thread-2840-1-1.html）

家久等了，這是多媒體文件格式系列課堂文章的第三篇，前面已經(jīng)講過(guò)了容器與音頻編碼，現(xiàn)在我們要看到最為復(fù)雜的視頻編碼了，人們一直在想盡辦法提高視頻編碼的效率，讓它在盡可能小的體積內(nèi)提供最好的畫(huà)面質(zhì)量，從而滿足人們對(duì)于視頻傳輸、存儲(chǔ)的需求。和前兩篇文章中介紹的容器與音頻編碼不同的是，視頻編碼有一條較為清晰的發(fā)展脈絡(luò)，比種類(lèi)繁多且不統(tǒng)一的音頻編碼要容易理順，目前國(guó)際通行的視頻編碼標(biāo)準(zhǔn)基本上都是由MPEG（動(dòng)態(tài)圖像專家組）和ITU-T（國(guó)際電信聯(lián)盟電信標(biāo)準(zhǔn)化部門(mén)）等組織牽頭開(kāi)發(fā)的，另外還有一些零星的編碼，它們可能在一段短暫的時(shí)間內(nèi)占據(jù)主流地位，不過(guò)最終還是讓位于國(guó)際通行標(biāo)準(zhǔn)。

國(guó)際上主要通行的編碼標(biāo)準(zhǔn)為ITU-T組織的H.26x系列視頻編碼和MPEG組織制定的部分編碼標(biāo)準(zhǔn)，有一點(diǎn)需要說(shuō)明的是，同樣的一個(gè)標(biāo)準(zhǔn)在不同組織那兒可能會(huì)叫成不同名字，比如最典型的就是AVC（高級(jí)視頻編碼），大家可能更熟悉它的另一個(gè)名字——H.264，AVC是MPEG組織在標(biāo)準(zhǔn)中給它起的名字，MPEG組織從屬于國(guó)際標(biāo)準(zhǔn)化組織（ISO）和國(guó)際電工委員會(huì)（IEC），所以在ISO標(biāo)準(zhǔn)中，它的正式名字是“MPEG-4 Part 10, Advanced Video Coding”。這種情況多見(jiàn)于H.26x系列編碼，下文會(huì)注出。

而在這條主要脈絡(luò)中，基本上囊括了接近半個(gè)世紀(jì)以來(lái)，視頻編碼的技術(shù)發(fā)展，我們將主要沿著H.26x以及MPEG這條主要脈絡(luò)，為各位讀者簡(jiǎn)單梳理出一條視頻編碼的發(fā)展歷程。

為什么我們需要對(duì)視頻進(jìn)行壓縮編碼？

很簡(jiǎn)單，就是為了減小視頻占用的容量大小。

數(shù)字視頻實(shí)質(zhì)上就是一幀幀連續(xù)的圖像，雖然一幀圖像的大小并不大，但每秒至少得有24幀圖像（一般情況），它們累計(jì)起來(lái)就會(huì)占據(jù)非常大的空間，我們沒(méi)有那么多的地方存儲(chǔ)原始數(shù)據(jù)，那么只有一條路可以走，對(duì)它進(jìn)行壓縮。而視頻的編碼過(guò)程就是這個(gè)壓縮過(guò)程，但與音頻一樣，在傳統(tǒng)數(shù)據(jù)壓縮算法來(lái)看視頻文件里面基本上是沒(méi)有什么冗余信息的，所以人們就有必要去開(kāi)發(fā)針對(duì)視頻的壓縮算法，把實(shí)際存在的冗余信息給去掉，從而減少它的數(shù)據(jù)量，達(dá)到減小占用容量的目的。因此，目前的視頻編碼基本上都是有損的，意味著編碼過(guò)后的視頻在畫(huà)面質(zhì)量上會(huì)有損失。

前藍(lán)光時(shí)代的視頻編碼發(fā)展之路

讓我們首先沿著國(guó)際標(biāo)準(zhǔn)，按時(shí)間順序來(lái)看看視頻編碼是怎么一步一步“現(xiàn)代化”的。

在模擬電視和膠片電影時(shí)代，我們看到的內(nèi)容都是模擬信號(hào)還原出來(lái)的。但隨著人們的需求不斷提高，和計(jì)算機(jī)、網(wǎng)絡(luò)的蓬勃發(fā)展，我們需要新的、能夠承載視頻內(nèi)容的數(shù)字編碼，用來(lái)支持視頻內(nèi)容在互聯(lián)網(wǎng)上的傳輸，或是將其存儲(chǔ)在數(shù)字化的存儲(chǔ)設(shè)備中。

在上世紀(jì)七十年代末八十年代初的時(shí)候，人們已經(jīng)研究出了不少新的針對(duì)圖像等多媒體內(nèi)容的壓縮算法，此時(shí)開(kāi)發(fā)數(shù)字視頻編碼的條件已經(jīng)基本成熟，而第一個(gè)開(kāi)發(fā)出實(shí)際編碼的，就是后來(lái)在數(shù)字視頻編碼領(lǐng)域中起領(lǐng)頭作用的視頻編碼專家組（VideoCodingExpertsGroup），他們是當(dāng)時(shí)名字還是“國(guó)際電報(bào)和電話咨詢委員會(huì)（CCITT）”的ITU-T（國(guó)際電信聯(lián)盟電信標(biāo)準(zhǔn)化部門(mén)）組織下面的專家組。這個(gè)編碼被命名為H.120，它誕生于1984年，是一種偏向于實(shí)驗(yàn)性質(zhì)的早期編碼，主要基于差分PCM編碼，用來(lái)保存電視內(nèi)容，但是它并沒(méi)有大規(guī)模的實(shí)際運(yùn)用。

H.261：引入各種特性，奠定現(xiàn)代視頻編碼基礎(chǔ)

在制定完H.120過(guò)后幾年，VCEG并沒(méi)有停止他們?cè)谝曨l編碼上面的研究。此時(shí)很多跨國(guó)公司已經(jīng)使用網(wǎng)絡(luò)進(jìn)行視頻會(huì)議的需求了，在互聯(lián)網(wǎng)帶寬尚不充裕的年代里，人們需要新的視頻編碼來(lái)實(shí)現(xiàn)流暢而優(yōu)質(zhì)的實(shí)時(shí)視頻通信，H.261就應(yīng)運(yùn)而生了。

H.261與首個(gè)數(shù)字視頻編碼標(biāo)準(zhǔn)H.120并沒(méi)有直接的繼承關(guān)系，它可以說(shuō)是完全另起爐灶的一種編碼。在針對(duì)圖像的壓縮算法上，H.261使用了我們現(xiàn)在比較熟悉的離散余弦變換（DCT）算法， 它在后來(lái)的JPEG編碼中起主要作用。但不止于此，它引入了一系列針對(duì)視頻的特性，奠定了現(xiàn)代視頻編碼的基礎(chǔ)，其中主要有宏塊（Macroblock）和基于宏塊的運(yùn)動(dòng)補(bǔ)償（Motion Compensation）。

宏塊與基于運(yùn)動(dòng)補(bǔ)償?shù)膸g預(yù)測(cè)

我們知道，視頻是由一幀一幀的圖像組成的組合，一般情況下一秒鐘的視頻中會(huì)包含24、25、30、60或更多張圖片，它們按照一定的時(shí)間間隔播放出來(lái)，基于視覺(jué)殘留原理形成了流暢、會(huì)動(dòng)的畫(huà)面。在連續(xù)的幾幀之間，實(shí)際上存在著大量重復(fù)的畫(huà)面，比如說(shuō)下面這個(gè)例子：

一個(gè)白色臺(tái)球在綠色桌面上面運(yùn)動(dòng)

用小球運(yùn)動(dòng)的方向和距離來(lái)描述圖像的變化

如果是以傳統(tǒng)的思路對(duì)每一幀圖像做壓縮的話，顯然整個(gè)視頻在壓縮過(guò)后仍存在大量的冗余。那么怎么辦呢？H.261標(biāo)準(zhǔn)引入了宏塊的思維，它將整個(gè)畫(huà)面切分為許多小塊，然后再引入基于運(yùn)動(dòng)補(bǔ)償?shù)膸g預(yù)測(cè)——畫(huà)面的大部分都是不動(dòng)的，那么我們將不動(dòng)部分的區(qū)塊沿用之前的壓縮結(jié)果，動(dòng)的部分用運(yùn)動(dòng)方向加距離這樣一個(gè)矢量來(lái)描述不就可以節(jié)省出大量的存儲(chǔ)空間了嗎？

DCT算法

將8x8個(gè)像素分成一個(gè)塊

DCT算法起源于上世紀(jì)70年代，到了80年代中后期，有研究者開(kāi)始將其用于圖像壓縮。這種算法可以將圖像從空間域轉(zhuǎn)換到頻率域，然后做量化——減少人眼敏感程度較低的高頻信息，保留絕大部分低頻信息，從而減少圖像的體積。最后再用高效的數(shù)據(jù)編碼方式將處理過(guò)后的數(shù)據(jù)進(jìn)一步壓縮，這里使用了Zig-Zag掃描和可變長(zhǎng)編碼。

注：圖像的高頻部分存有很多細(xì)節(jié)信息，而低頻部分則存有輪廓等覆蓋范圍較大的信息。

亮度通道做DCT變換后的圖像，可以看到上方顏色連續(xù)部分非常平坦，而下方則擁有諸多細(xì)節(jié)

在H.261及之后基于H.261框架的視頻編碼中，DCT算法主要針對(duì)的是關(guān)鍵幀的壓縮，所謂關(guān)鍵幀，就是在運(yùn)動(dòng)補(bǔ)償中作為基準(zhǔn)參考的一幀。打個(gè)比方，就像Flash動(dòng)畫(huà)中的關(guān)鍵幀一樣，它定義了一個(gè)起點(diǎn)，后續(xù)的幾幀都是基于這個(gè)關(guān)鍵幀演算出來(lái)的。因?yàn)樗蛔鰩瑑?nèi)壓縮，不涉及其他幀，又被稱為Intra-frame（幀內(nèi)編碼幀），簡(jiǎn)稱I幀。

小結(jié)：創(chuàng)立混合編碼框架，有里程碑意義

H.261設(shè)計(jì)的目標(biāo)是編碼出比特率在64~2048kbps范圍內(nèi)的視頻，以用于實(shí)時(shí)的視頻電話等應(yīng)用。它首次確立了幀內(nèi)預(yù)測(cè)與幀間預(yù)測(cè)同時(shí)使用的編碼框架，在消除每一幀本身存有的冗余外，消除了幀與幀之間的冗余信息，從而大幅度降低了碼率，成為了實(shí)際可用性相當(dāng)高的一種視頻編碼。而它的編碼框架也影響到了之后幾乎所有的視頻編碼，尤其是H.26x和MPEG家族。

需要說(shuō)明的是，H.261只是規(guī)定了該如何解碼，只需要編碼器最終產(chǎn)生的視頻流可以被所有H.261解碼器順利解碼即可。至于你前面怎么編碼的，具體用的算法如何不同都沒(méi)有關(guān)系，這點(diǎn)適用于之后幾乎所有的視頻編碼。

MPEG-1 Part 2：引入幀類(lèi)型概念，成為VCD標(biāo)準(zhǔn)

幾乎在H.261開(kāi)發(fā)的同時(shí)間，1988年，ISO和IEC兩大國(guó)際標(biāo)準(zhǔn)化組織建立了MPEG（動(dòng)態(tài)圖像專家組，MovingPictureExpertsGroup）以開(kāi)發(fā)國(guó)際標(biāo)準(zhǔn)化的音視頻壓縮編碼。他們?cè)?992年11月份完成了MPEG-1整套標(biāo)準(zhǔn)的制定，其中的第二部分標(biāo)準(zhǔn)化了一個(gè)新的視頻壓縮編碼，它受到H.261的深刻影響，繼承和發(fā)展了分塊、運(yùn)動(dòng)補(bǔ)償、DCT算法等思想，并做出了自己的改進(jìn)，比如引入新的雙向預(yù)測(cè)幀、亞像素精度的運(yùn)動(dòng)補(bǔ)償?shù)刃录夹g(shù)。

引入雙向預(yù)測(cè)幀（B幀）

H.261引入基于運(yùn)動(dòng)補(bǔ)償?shù)膸g預(yù)測(cè)算法之后，視頻中的幀其實(shí)就已經(jīng)分成兩類(lèi)了，一類(lèi)是完整的，稱為關(guān)鍵幀（Intra-frame），它就是一張完整的靜態(tài)圖像，可以直接被解碼出來(lái)。另外的幀則是通過(guò)運(yùn)動(dòng)補(bǔ)償算法在關(guān)鍵幀之上計(jì)算得到的。

MPEG-1 Part 2引入了幀類(lèi)別的概念，原來(lái)的關(guān)鍵幀被稱為“I幀”，基于幀間預(yù)測(cè)計(jì)算得到的幀為P幀。在這兩種H.261已有的幀類(lèi)型外，它引入了一種新的幀：雙向預(yù)測(cè)幀，也叫作B幀。

原本的P幀只能夠前向預(yù)測(cè)，也就是說(shuō)，它只能夠基于前一幀計(jì)算得到。雙向預(yù)測(cè)，顧名思義，它可以用前面的一幀作為自己的參考，也可以用后面那幀來(lái)進(jìn)行預(yù)測(cè)。由于參考了更多的信息，B幀自身就可以包含更少的信息量，其壓縮比自然就要比只能做單向預(yù)測(cè)的P幀還要高了。但是，B幀的引入帶來(lái)了一個(gè)新的問(wèn)題，即編解碼難度上升了。

引入幀序列（GroupofPictures）

幀序列是一些按順序排列的圖像幀的組合，簡(jiǎn)稱為GOP。一個(gè)GOP的頭部是一個(gè)I幀，也只會(huì)有一個(gè)I幀，它包含了該GOP的基準(zhǔn)參考圖像信息，其后是數(shù)個(gè)P幀、B幀，它們都是以開(kāi)頭的I幀為基礎(chǔ)，經(jīng)過(guò)計(jì)算得到的。

上面的圖片就描述了一個(gè)完整的GOP，可以看到一個(gè)I和P幀之間隔了三個(gè)B幀。實(shí)際應(yīng)用中，B幀確實(shí)是數(shù)量最多的幀類(lèi)型。

亞像素精度的運(yùn)動(dòng)補(bǔ)償

H.261中引入的幀間預(yù)測(cè)精度為像素級(jí)的，對(duì)很多分塊的運(yùn)動(dòng)瞄準(zhǔn)是不精確的，這點(diǎn)在MPEG-1上得到了有效改進(jìn)。他們引入了亞像素級(jí)別的運(yùn)動(dòng)補(bǔ)償，可以以1/2像素級(jí)別描述像素塊的運(yùn)動(dòng)。

小結(jié)：成功接棒

MPEG-1成功地繼承了H.261的技術(shù)框架，并對(duì)其進(jìn)行了有效的補(bǔ)充，從而達(dá)成了不錯(cuò)的壓縮比。在那個(gè)人們普遍還在用VHS錄像帶的年代里，MPEG-1已經(jīng)能夠以1~2Mbps的碼率提供類(lèi)似于VHS錄像帶的畫(huà)質(zhì)了。這也使得它被選用為VCD的標(biāo)準(zhǔn)，在世界范圍，尤其是在我國(guó)風(fēng)行十余年。

不過(guò)MPEG-1主要面向低碼率應(yīng)用，但實(shí)際上它在高碼率下的表現(xiàn)也不差，于是，MPEG很快推出了它的升級(jí)版本，也就是MPEG-2。

MPEG-2 Part 2/H.262：DVD與（前）數(shù)字電視標(biāo)準(zhǔn)

1994年推出的MPEG-2中標(biāo)準(zhǔn)化了一種新的視頻編碼，它在1995年被ITU-T接納為H.262，在這里我們簡(jiǎn)單稱它為MPEG-2。相對(duì)于1993年推出的MPEG-1，它并沒(méi)有太大的改動(dòng)，主要是針對(duì)DVD應(yīng)用和數(shù)字時(shí)代進(jìn)行了改良。

支持隔行掃描

隔行掃描放在今天也并不是過(guò)時(shí)的概念，在九十年代初期，這種掃描方式有效降低了視頻傳輸所需的數(shù)據(jù)帶寬。平常我們看到的視頻畫(huà)面大部分都是逐行掃描（Progressive scan）的，比如說(shuō)視頻的垂直分辨率為1080像素，那么每幀畫(huà)面的垂直分辨率就是1080像素。

而隔行掃描，顧名思義就是隔一行掃一次，它將每一幀畫(huà)面拆分成兩個(gè)場(chǎng)，每個(gè)場(chǎng)保留原有幀一半的信息。這種掃描方式在保證畫(huà)面流暢度的同時(shí)降低了對(duì)傳輸帶寬的需求，被各國(guó)的電視廣播系統(tǒng)采納使用。MPEG-2在制定時(shí)充分考慮到了數(shù)字電視系統(tǒng)的需求，加入了對(duì)隔行掃描的支持。

面向高碼率和標(biāo)清、高清晰度

從上世紀(jì)90年代開(kāi)始，數(shù)字電視系統(tǒng)逐漸開(kāi)始普及，它帶來(lái)了更大的傳輸帶寬。同時(shí)，DVD標(biāo)準(zhǔn)也快要塵埃落定，它提供了比CD大幾倍的容量，能夠承載更為清晰的畫(huà)面。因此，MPEG-2提升了自己的目標(biāo)碼率范圍，從MPEG-1時(shí)代的1~2Mbps實(shí)際豪爽地倍增到6~10Mbps，甚至在高清時(shí)代，它能夠用20Mbps左右的碼率傳輸高清畫(huà)面。

小結(jié)：曾經(jīng)最為通用的視頻編碼

MPEG-2雖然沒(méi)有加入太多新的特性，在壓縮率方面實(shí)際沒(méi)有太大的提升，但由于它被選中成為DVD-Video、數(shù)字電視、DV等等一系列應(yīng)用的標(biāo)準(zhǔn)編碼，順利地成為了世界范圍內(nèi)通行的視頻編碼格式，時(shí)至今日，它仍然被大量地應(yīng)用在數(shù)字電視等系統(tǒng)中。

H.263：FLV與3GP的好搭檔

原先的H.261和MPEG-1都是偏向于低碼率應(yīng)用的，隨著互聯(lián)網(wǎng)和通訊技術(shù)的飛速發(fā)展，人們對(duì)網(wǎng)絡(luò)視頻的需求在提高，在低碼率下追求更高質(zhì)量的視頻成為了新的目標(biāo)，而作為通信業(yè)的一大標(biāo)準(zhǔn)制定者，ITU-T在1995年推出了H.261的直接繼承者——H.263。

H.263有多個(gè)版本，在1995年推出的初版中，它主要引入了在MPEG-1上開(kāi)始應(yīng)用的亞像素精度運(yùn)動(dòng)補(bǔ)償，同樣支持到1/2像素的精度。另外它改進(jìn)了使用的DCT算法，加入了新的運(yùn)動(dòng)向量中值預(yù)測(cè)法，在編碼效率上相比H.261有較為明顯的提升。

需要注意的是，以上特性僅僅是它的基礎(chǔ)部分，只需要實(shí)現(xiàn)這些新東西就算是支持H.263了，但它還給出了一系列額外的、用于增強(qiáng)壓縮率的特性，比如說(shuō)，在MPEG-1中新增的B幀，到了H.263中成了額外的PB幀。

H.263是一個(gè)被不斷升級(jí)的編碼，在初版之后還存在H.263+和H.263++兩個(gè)官方升級(jí)版。在H.263+中，它著重提升了壓縮率，相對(duì)初版有15~25%的總體提升。同時(shí)在2001年的修訂中，它還引入了“Profile”的概念，將各種特性分成幾個(gè)級(jí)別，完整支持某一級(jí)別的特性即為支持此Profile，比如說(shuō)，初版H.263的基礎(chǔ)部分是它的“Baseline”P(pán)rofile。

H.263在互聯(lián)網(wǎng)和通信業(yè)中得到了廣泛的應(yīng)用，它一度活躍在各種視頻網(wǎng)站上面，和Flash播放器一起撐起了互聯(lián)網(wǎng)在線視頻的一片天，而在通信業(yè)中，被3GPP組織采納成為多種通信標(biāo)準(zhǔn)中的標(biāo)準(zhǔn)視頻編碼，比如說(shuō)MMS——也就是彩信。

另外它還被MPEG組織參考，作為MPEG-4 Part 2的基礎(chǔ)。

MPEG-4 Part 2：特性很多，實(shí)現(xiàn)很多

在MPEG-2之后，MPEG組織有了新的目標(biāo)——開(kāi)發(fā)一套壓縮率更高的編碼框架，但同時(shí)保留對(duì)低復(fù)雜性的支持。1998年，MPEG-4標(biāo)準(zhǔn)正式誕生，其中第二部分定義了一套新的視覺(jué)編碼體系，是的，它并不是僅僅針對(duì)于視頻應(yīng)用，而是廣泛意義上的視覺(jué)（Visual），故也被稱為MPEG-4 “Visual”。

它的核心設(shè)計(jì)實(shí)際上與H.263趨同，但是包含了更多關(guān)于編碼效率的增強(qiáng)。它定義了復(fù)雜度不同的多種Profile，從最基本的Simple Profile到非常復(fù)雜的Simple Studio Profile，前者不支持B幀，而后者甚至支持到4K分辨率和12-bit、4:4:4采樣的編碼。

盡管MPEG-4 Visual是一個(gè)野心勃勃的編碼，但它遭到了業(yè)界的冷待和批評(píng)。一個(gè)是它的壓縮率相比起MPEG-2并沒(méi)有重大提升，而因?yàn)槭跈?quán)和專利費(fèi)用問(wèn)題，很多廠商選擇自己去實(shí)現(xiàn)一套兼容MP EG-4 Visual的編碼，而不是直接采用標(biāo)準(zhǔn)，這其中就有經(jīng)典的DivX和Xvid兩兄弟，微軟也拿它作為Windows Media Video的基礎(chǔ)，一點(diǎn)點(diǎn)升級(jí)到WMV9。

其他編碼

時(shí)間已經(jīng)來(lái)到二十一世紀(jì)，高清視頻和高清電視開(kāi)始普及，新的應(yīng)用帶來(lái)了更高的需求，迫使業(yè)界開(kāi)始研究新的更高效的視頻編碼，我們熟知的AVC即將登場(chǎng)，不過(guò)在介紹它之前，我們先來(lái)看看其他幾個(gè)有較多應(yīng)用的視頻編碼。

MJPEG

JPEG想必大家都很熟悉，這個(gè)MJPEG跟JPEG之間有著千絲萬(wàn)縷的關(guān)系。視頻不是一幀一幀的嗎？那每一幀都用JPEG進(jìn)行壓縮，然后組合起來(lái)不就行了嗎？是的，MJPEG就是一個(gè)JPEG圖像組合，每一幀包含了完整的圖像信息，正因?yàn)槿绱耍膲嚎s率并不高，但是實(shí)現(xiàn)起來(lái)簡(jiǎn)單的特點(diǎn)讓很多數(shù)碼相機(jī)廠商將它作為相機(jī)的視頻編碼，實(shí)際上它得到了相當(dāng)廣泛的利用。

RealMedia

對(duì)于國(guó)人來(lái)說(shuō)，RealMedia絕對(duì)是一個(gè)帶有情懷的詞語(yǔ)。他們家的RM系列編碼在十多年前在國(guó)內(nèi)網(wǎng)絡(luò)上曾有相當(dāng)?shù)母采w度。實(shí)際上它的實(shí)現(xiàn)基本上都是參考同時(shí)期的國(guó)際標(biāo)準(zhǔn)而來(lái)的，比如說(shuō)清晰度和壓縮比都很高，壓過(guò)同時(shí)期DivX一頭的rv40是參考了H.264而形成的。

RM最大的問(wèn)題還是支持范圍不廣，在瀏覽器中播放RM需要插件，基于Flash播放器的視頻網(wǎng)站的興起也讓它的用途逐漸變得狹隘，最終在正版H.264的沖擊下，RM慢慢的銷(xiāo)聲匿跡了。

WMV

微軟有自己的客廳夢(mèng)想，除了Xbox以外，他們想讓PC走進(jìn)客廳，當(dāng)然這都與Windows Media Video無(wú)關(guān)。微軟基于MPEG-4 Part 2創(chuàng)造出了一系列新的編碼，起初它們都被稱為Microsoft MPEG-4或是Microsoft ISO MPEG-4，但很快，微軟將其歸入了Windows Media家族，首個(gè)版本是WMV7。

接下來(lái)微軟在WMV7的基礎(chǔ)上面不斷加入自家的東西，使得它能夠適應(yīng)更高分辨率的視頻，最后，他們?cè)赪MV9中加入了新的Profile，產(chǎn)生了新的VC-1編碼。

藍(lán)光時(shí)代標(biāo)準(zhǔn)之爭(zhēng)

在DVD普及之后，高清視頻的時(shí)代很快就到來(lái)了。人們很快發(fā)現(xiàn)，就算是雙層DVD，其容量對(duì)1080p視頻來(lái)說(shuō)，也是完全不夠用的。很快，大公司開(kāi)發(fā)出了兩種新的以藍(lán)光為激光束的光盤(pán)，一種是以DVD論壇為首開(kāi)發(fā)的HD DVD，另一種是Sony牽頭另起爐灶的Blu-ray。兩種光盤(pán)格式的戰(zhàn)爭(zhēng)我們按下不表，這里要講的是，伴隨著新光盤(pán)制式一起出現(xiàn)的全新視頻編碼標(biāo)準(zhǔn)——VC-1和H.264。

AVC/H.264：集大成者一統(tǒng)江湖

HD DVD和Blu-ray的標(biāo)準(zhǔn)里一共支持了三種視頻編碼，其一是古老的MPEG-2，其二是微軟主推的VC-1，最后一種就是全新的AVC。別看它的名字很簡(jiǎn)單，其實(shí)它大有來(lái)頭，是MPEG和ITU-T兩個(gè)組織聯(lián)合推出的新一代國(guó)際標(biāo)準(zhǔn)，在MPEG那兒被規(guī)范為MPEG-4 Part 10 Advanced Video Codec，在ITU-R那兒它又被標(biāo)準(zhǔn)化為H.264。

對(duì)于H.264這個(gè)名字，我想大家應(yīng)該都不會(huì)耳熟。但就是這個(gè)現(xiàn)在我們每天都能夠接觸到的視頻編碼格式，曾在十多年前引發(fā)了一場(chǎng)軟解危機(jī)，將當(dāng)時(shí)很多主流CPU挑落馬下，也使得ANI三家都在自己的產(chǎn)品中加入了輔助解碼的硬件加速單元，不過(guò)這與我們的主題沒(méi)什么關(guān)系，暫且按下不表。這里要講的，還是H.264的厲害之處，究竟它用了什么手段能夠在編碼質(zhì)量上面實(shí)現(xiàn)飛躍，從而獨(dú)占市場(chǎng)十余年時(shí)間還沒(méi)呈現(xiàn)衰退跡象。

總結(jié)下來(lái)主要有如下的幾點(diǎn)：更靈活的宏塊劃分方法、數(shù)量更多的參考幀、更先進(jìn)的幀內(nèi)預(yù)測(cè)和壓縮比更高的數(shù)據(jù)壓縮算法。

更靈活的宏塊劃分方法

之前的標(biāo)準(zhǔn)中，宏塊的劃分方法是固定的，以16x16個(gè)像素為一個(gè)宏塊。不過(guò)在新時(shí)代，這種粗放的劃分方法不夠靈活，于是H.264同時(shí)允許16x8、8x16、8x8、8x4、4x8和4x4這些精細(xì)度更高的劃分方式。同時(shí)H.264將亞像素精度的運(yùn)動(dòng)補(bǔ)償描述從1/2像素精度細(xì)化到了1/4的程度。這樣一來(lái)，在幀間預(yù)測(cè)中新的編碼擁有更高的精準(zhǔn)度，但實(shí)際的數(shù)據(jù)量并不會(huì)增加太多，提高了壓縮率。

數(shù)量更多的參考幀

在以前的標(biāo)準(zhǔn)中，每個(gè)B或P幀可參考的幀數(shù)是有限且數(shù)量過(guò)少的，H.264一舉將限制放松到了16幀的程度，在大部分應(yīng)用場(chǎng)景中，每幀的可參考幀數(shù)量至少都有4~5個(gè)，而在之前的標(biāo)準(zhǔn)中，P幀僅能參考1幀，B幀則是2。這一特性可以提高大多數(shù)場(chǎng)景的畫(huà)面質(zhì)量，或是降低體積。

更先進(jìn)的幀內(nèi)壓縮

每個(gè)宏塊包含的預(yù)測(cè)模式信息

對(duì)于I幀，H.264也引入了新的壓縮方式。一般來(lái)說(shuō)，對(duì)于圖像中的某一像素點(diǎn)，它與附近相鄰的像素的顏色是差距不大的，所以我們就可以利用這個(gè)特性進(jìn)一步縮小單幀圖像的大小，怎么利用呢？H.264將單個(gè)宏塊內(nèi)的像素顏色變化規(guī)律規(guī)范成了公式，編碼時(shí)只要寫(xiě)此處應(yīng)用哪個(gè)公式就行了。當(dāng)然這里我表述的較為簡(jiǎn)單，完整的幀內(nèi)預(yù)測(cè)還是非常復(fù)雜的，H.264對(duì)4x4的宏塊規(guī)定了9種預(yù)測(cè)模式，對(duì)16x16的亮度平面宏塊規(guī)定了4種可用模式。大大減少了單幀圖像的數(shù)據(jù)量，同時(shí)保持了很高的圖像質(zhì)量。

差分圖像加上預(yù)測(cè)信息可以還原出原始圖像

CABAC

在編碼的最后階段，對(duì)數(shù)據(jù)進(jìn)行無(wú)損壓縮時(shí)，H.264除了支持在H.261中就存在的VLC編碼外，新增加了兩種無(wú)損數(shù)據(jù)壓縮編碼，一種是VLC的升級(jí)版——CAVLC，另一種是復(fù)雜程度更高的CABAC（前文參考之適應(yīng)性二元算術(shù)編碼，Context-basedAdaptiveBinaryArithmeticCoding）。

CABAC也是一種熵編碼，主要原理也是用長(zhǎng)編碼替換掉出現(xiàn)頻率少的數(shù)據(jù)，而用短編碼替換出現(xiàn)頻率高的數(shù)據(jù)，但它引入了更多統(tǒng)計(jì)學(xué)優(yōu)化，并且具有動(dòng)態(tài)適應(yīng)能力。雖然在解碼時(shí)需要更多計(jì)算，但它能夠比CAVLC節(jié)省更多的數(shù)據(jù)量，通常能有10%。

小結(jié)：巨大的改變帶來(lái)的是巨大的成功

除了以上介紹的幾點(diǎn)外，H.264還有非常多的新特性，與MPEG-4 Visual不同的是，這些新特性有效地幫助H.264在節(jié)省容量方面取得了重大進(jìn)展。這里我舉一個(gè)有強(qiáng)烈對(duì)比的例子，DVD Video標(biāo)準(zhǔn)的視頻，采用的是MPEG-2編碼，碼率約在9Mbps左右，但它的分辨率僅為720x480，而且在某些場(chǎng)景下我們可以很明顯看到有損壓縮產(chǎn)生的破壞；而同樣的碼率，放在H.264上面，已經(jīng)可以承載起1080p的視頻，并且擁有良好的質(zhì)量。

除了在編碼效率上有重大提升外，H.264針對(duì)網(wǎng)絡(luò)傳輸?shù)奶匦詫?duì)編碼組織方式進(jìn)行了優(yōu)化，讓它更能夠抗丟包，抗干擾。在種種手段之下，它成為了近十年來(lái)統(tǒng)治視頻領(lǐng)域的編碼，并且可以說(shuō)它已經(jīng)成為了HTML 5中的事實(shí)標(biāo)準(zhǔn)，現(xiàn)在你很難看到一件不支持H.264編碼的設(shè)備，從手機(jī)到攝像機(jī)，從流視頻到藍(lán)光光盤(pán)，它的應(yīng)用范圍廣，效能強(qiáng)，即使在新編碼已經(jīng)出現(xiàn)的當(dāng)下，它仍然有很強(qiáng)的生命力和不可替代性，可以預(yù)見(jiàn)的是，H.264將在未來(lái)一段時(shí)間內(nèi)繼續(xù)統(tǒng)治視頻編碼領(lǐng)域。

VC-1：失敗的挑戰(zhàn)者

進(jìn)入高清時(shí)代后，微軟也順應(yīng)潮流，為WMV9進(jìn)行了升級(jí)，加入了針對(duì)高清視頻的新特性，讓它能夠勝任1080p級(jí)別的高清視頻，新的編碼即為VC-1。與H.264相比，VC-1總體的復(fù)雜程度要低一些，也因此在軟解上對(duì)CPU更加友好。實(shí)際上VC-1也通過(guò)了國(guó)際組織SMPTE的標(biāo)準(zhǔn)化。

VC-1與HD DVD有一定的捆綁關(guān)系，在藍(lán)光大戰(zhàn)初期也通過(guò)這種方式得到了一定的推廣。然而，隨著HD DVD陣營(yíng)的認(rèn)輸，VC-1也隨之銷(xiāo)聲匿跡，很難再看到了。

UHD與流媒體時(shí)代，新的編碼興起

H.264很強(qiáng)大，但是它在超清時(shí)代有點(diǎn)不夠用了。隨著視頻分辨率的跨越式提升，H.264表現(xiàn)出了疲態(tài)，它在應(yīng)對(duì)4K視頻時(shí)已經(jīng)沒(méi)有辦法提供很好的壓縮比了。很明顯，人們需要新的編碼來(lái)繼承它的位置，而它的直接繼承者——HEVC，在經(jīng)過(guò)多年研究之后，終于在2013年被通過(guò)了。

HEVC/H.265/MPEG-H Part 2：視頻編碼王位繼任者

HEVC，全稱高效視頻編碼（HighEfficiencyVideoCoding），同樣的，它也是由MPEG和ITU-T聯(lián)合制定的國(guó)際標(biāo)準(zhǔn)編碼。被包含在MPEG-H規(guī)范中，是為第二部分（Part 2），在ITU-T那兒，它是H.26x家族的新成員，為H.265。

HEVC主要是針對(duì)高清及超清分辨率視頻而開(kāi)發(fā)的，相比起前代AVC，它在低碼率時(shí)擁有更好的畫(huà)質(zhì)表現(xiàn)，同時(shí)在面對(duì)高分辨率視頻時(shí)，也能提供超高的壓縮比，幫助4K視頻塞入藍(lán)光光盤(pán)。

代替宏塊的編碼樹(shù)單元

HEVC引入了新的編碼樹(shù)單元（CodingTreeUnits）概念，取代掉了存在于視頻編碼中多年的宏塊概念，它的單塊面積大了許多，達(dá)到了64x64，但仍然保留了可變大小和可分割特性，最小單元為16x16。單個(gè)編碼樹(shù)中包含了小的編碼單元，它們可以由四分樹(shù)形式呈現(xiàn)，并很快地可以確定下其中的單元是否可被再分割，內(nèi)部編碼單元最小可以被分割為8x8大小，精細(xì)程度仍然是非常高的。

單個(gè)編碼單元也可以繼續(xù)被切割、分類(lèi)，可以成為預(yù)測(cè)單元（Prediction Units），后者可以指示該單元的預(yù)測(cè)形式，是畫(huà)面內(nèi)預(yù)測(cè)還是畫(huà)面間預(yù)測(cè)或者甚至是根本沒(méi)有變化、可以被跳過(guò)的單元；也可以成為轉(zhuǎn)換單元（Transform Units），它可以做DCT轉(zhuǎn)換或是量化。

編碼樹(shù)單元的引入讓HEVC既可以用大面積單元來(lái)提高編碼效率，也可在需要的時(shí)候細(xì)化，保留更精細(xì)的細(xì)節(jié)。所謂該粗略的地方就粗略，該精細(xì)的地方就精細(xì)，HEVC在它的幫助下讓碼流的效率更高。

更高效的DCT

既然分塊的最大面積大了，那么DCT算法也需要跟上才行，HEVC將DCT算法的最大尺寸擴(kuò)大到了32x32的地步，對(duì)于圖像中變化較為平坦的部分，它有著更高的壓縮率。

33種幀內(nèi)預(yù)測(cè)方向

還記得上面寫(xiě)到H.264為4x4宏塊引入了9種幀內(nèi)預(yù)測(cè)方向嗎？HEVC直接把這個(gè)數(shù)字提升到了33種，在靜態(tài)圖像的壓制上不僅實(shí)現(xiàn)了更高的效率，也實(shí)現(xiàn)了更高的精度，這也是它成功殺入靜態(tài)圖像編碼市場(chǎng)的一大利器。雖然編碼難度變高了，但只要用硬件編碼器就沒(méi)有那么多問(wèn)題。

小結(jié)：高效編碼，但受困于高額專利費(fèi)用

相較于AVC，HEVC在高分辨率下的編碼效率又有非常大的提升，舉個(gè)實(shí)例，同樣一段4K視頻，使用H.264編碼的大小可能會(huì)比使用HEVC大出個(gè)一倍。這種巨大的進(jìn)步幅度也使得Blu-ray直接用它作為標(biāo)準(zhǔn)編碼，推出了UHD BD，而它在單幀圖像壓縮上面的改進(jìn)也讓它擁有勝過(guò)JPEG的能力，于是我們看到在移動(dòng)端，越來(lái)越多的設(shè)備選擇將其作為默認(rèn)的視頻、照片輸出編碼。

但是相比起AVC，HEVC的推廣速度慢了很多，一個(gè)是它的編解碼難度比H.264高了太多，但這點(diǎn)通過(guò)各路硬件編碼器和軟件優(yōu)化逐漸化解掉了，目前常見(jiàn)的設(shè)備基本上支持HEVC的硬件編解碼；第二個(gè)就是HEVC高昂的專利費(fèi)用問(wèn)題，它并不是一個(gè)免費(fèi)的編碼格式，雖然個(gè)人使用它完全沒(méi)有問(wèn)題，但對(duì)于想要兼容它的廠商來(lái)說(shuō)，這筆高昂的專利費(fèi)用足以讓他們卻步，尤其是崇尚自由開(kāi)放的互聯(lián)網(wǎng)市場(chǎng)。于是，我們看到眾多廠商選擇了免費(fèi)開(kāi)放的VPx系列編碼，以及系列的后繼者——AV1。

VPx系列與AV1：以免費(fèi)為賣(mài)點(diǎn)

VPx系列編碼實(shí)際上已經(jīng)有很長(zhǎng)的歷史了。它的前身是On2 Technologies公司的TrueMotion系列視頻編碼，在開(kāi)發(fā)TrueMotion VP8編碼時(shí)，公司被Google收購(gòu)了。在Google的介入下，VP8從原本的專有技術(shù)變成了開(kāi)放技術(shù)，在BSD許可證下面進(jìn)行開(kāi)源。

從技術(shù)角度來(lái)說(shuō)，VP8采用的技術(shù)是類(lèi)似于H.264的。雖然在我們看到的宣傳中，VP8擁有比H.264更佳的壓縮效率，但在實(shí)際應(yīng)用中，由于它在設(shè)計(jì)上有一定的瑕疵，表現(xiàn)并不如H.264，最終它雖然進(jìn)入了Web標(biāo)準(zhǔn)，但也沒(méi)見(jiàn)有人用它，反而是由它的幀內(nèi)壓縮技術(shù)提取而成的WebP受到了歡迎。

VP8的表現(xiàn)并不理想，Google很快就推出了它的繼任者——VP9。這次，他們參考的是HEVC，設(shè)計(jì)目標(biāo)同樣是高分辨率下的高效編碼。VP9中的一些設(shè)計(jì)是受到了HEVC的影響的，比如說(shuō)同樣最大為64x64的超級(jí)塊（Super Block）。最終VP9達(dá)成的結(jié)果是提供了比VP8高達(dá)50%的效率提升。看起來(lái)它能夠和HEVC比肩了，但是它也遇到了和VP8相似的問(wèn)題，推廣不開(kāi)。VP9的應(yīng)用范圍實(shí)際也局限在Google自家的Youtube中，只能說(shuō)是缺少實(shí)際應(yīng)用場(chǎng)景。

但很快，一些廠商認(rèn)識(shí)到HEVC高昂專利費(fèi)用帶來(lái)的弊端，他們決定創(chuàng)立一個(gè)開(kāi)放聯(lián)盟，推廣開(kāi)放、免費(fèi)的媒體編碼標(biāo)準(zhǔn)。這個(gè)聯(lián)盟就是開(kāi)放媒體聯(lián)盟（Alliance forOpenMedia），創(chuàng)始成員有Amazon、Cisco、Google、Intel、Microsoft、Mozilla和Netflix這些我們熟悉的大公司，而后加入的還有蘋(píng)果、ARM、三星、NVIDIA、AMD這些同樣耳熟能詳?shù)墓尽?/p>

Google將他們還在開(kāi)發(fā)中的VP10貢獻(xiàn)了出來(lái)作為聯(lián)盟新編碼的基礎(chǔ)，很快，名為AV1的編碼誕生了。在Facebook的測(cè)試中，它分別比VP9和H.264強(qiáng)上34%、46.2%，這次看上去是真的達(dá)到HEVC的級(jí)別了。

在這兩年中，AV1也確實(shí)開(kāi)始得到廠商們的重視，比如說(shuō)最近Netflix已經(jīng)確定了要使用AV1作為主力編碼，而Intel也推出了開(kāi)源免費(fèi)的SVT-AV1編碼器，充分利用自家的AVX-512指令集。但是這種聯(lián)盟還是相當(dāng)松散的，比如說(shuō)聯(lián)盟成員之一的蘋(píng)果，目前對(duì)AV1根本是無(wú)動(dòng)于衷，旗下設(shè)備中全部轉(zhuǎn)向HEVC。

不過(guò)從Netflix決定使用AV1作為主力編碼這種態(tài)度來(lái)看，AV1免費(fèi)、開(kāi)放的特性還是具有相當(dāng)?shù)奈Φ摹５壳霸谟布矫媸侨狈?duì)它的支持的，不僅是PC端沒(méi)有針對(duì)AV1做硬件解碼，數(shù)量更多的移動(dòng)設(shè)備也沒(méi)有適配，前不久剛有一款宣傳是首個(gè)加入對(duì)AV1硬件解碼的SoC才發(fā)布。對(duì)比起硬件支持較為齊全的HEVC，這將是AV1推廣之路上的一道檻。

未來(lái)編碼：VVC

目前MPEG和VCEG已經(jīng)開(kāi)始研究HEVC的繼任者了，目前我們知道的信息是，它暫時(shí)被命名為Versatile Video Coding（多才多藝視頻編碼），并將會(huì)成為H.266。它是面向于未來(lái)視頻的編碼，將會(huì)支持從4K到16K分辨率的視頻壓縮，并且支持360°視頻，它的目標(biāo)是在HEVC的基礎(chǔ)上將編碼效能提升一倍。

未來(lái)它可能加入的新特性有：更為復(fù)雜的編碼單元結(jié)構(gòu)；更大、更細(xì)致的區(qū)塊劃分；全局幀參考；更多的幀內(nèi)預(yù)測(cè)模式（目前已經(jīng)有65種）……在復(fù)雜度上面，相比HEVC，VVC將會(huì)直接高出一個(gè)維度。但是國(guó)際標(biāo)準(zhǔn)目前面對(duì)著以AV1為代表的開(kāi)放標(biāo)準(zhǔn)的挑戰(zhàn)，很難說(shuō)他們會(huì)不會(huì)取消掉部分特性，從而將它正式發(fā)布的時(shí)間給提前。

總結(jié)：與時(shí)俱進(jìn)

顯示器、電視的分辨率越來(lái)越高，網(wǎng)絡(luò)帶寬越來(lái)越大，設(shè)備對(duì)于多媒體內(nèi)容的處理能力越來(lái)越強(qiáng)，視頻編碼也一直隨著時(shí)代的變化而不斷進(jìn)步著，但是它的框架從H.261開(kāi)始就未曾有過(guò)重大的變化，只不過(guò)每個(gè)新編碼都在這個(gè)既定框架下利用半導(dǎo)體性能的成長(zhǎng)而加入新的更為高效的算法。比起進(jìn)步并不明顯的音頻編碼，新視頻編碼在帶寬與容量上面提供的節(jié)約效果要明顯得多了，甚至更新的編碼在畫(huà)質(zhì)表現(xiàn)上也更有優(yōu)勢(shì)。在不遠(yuǎn)的未來(lái)，10-bit色深和HDR將會(huì)普及，在根本上取代掉還是上世紀(jì)標(biāo)準(zhǔn)的SDR內(nèi)容，為我們帶來(lái)更為精彩的視覺(jué)體驗(yàn)。諸如HEVC這樣的編碼實(shí)際早已做好了準(zhǔn)備，在未來(lái)，它們的應(yīng)用場(chǎng)景甚至將突破視頻領(lǐng)域，就以新的蘋(píng)果設(shè)備為例，HEVC實(shí)際已經(jīng)成為它的標(biāo)準(zhǔn)編碼格式，通行于圖像和視頻領(lǐng)域中。

另外，根據(jù)最新的報(bào)告，當(dāng)前互聯(lián)網(wǎng)流量中占大頭的就是視頻流量，隨著流媒體繼續(xù)深入日常生活，用于視頻傳輸?shù)牧髁恐粫?huì)更大，而互聯(lián)網(wǎng)的總體帶寬并不是可以無(wú)限提升的，對(duì)于內(nèi)容提供方來(lái)說(shuō)，流量費(fèi)用也是相當(dāng)一部分開(kāi)銷(xiāo)，壓縮效率更好的編碼自然也會(huì)受到他們的青睞。實(shí)際上，編碼不斷升級(jí)這件事情是雙贏的，用戶和內(nèi)容提供方都可以從中獲利。

由于時(shí)間與作者個(gè)人能力限制，本篇文章也存在諸多的不足，但我仍然想通過(guò)對(duì)這些編碼的概述讓更多人了解到正確的編碼知識(shí)，如果能夠起到拋磚引玉的作用，讓更多人對(duì)編碼產(chǎn)生興趣，開(kāi)始自己的研究，那是最好不過(guò)的事情了。

網(wǎng)頁(yè)中添加視頻、聲音、動(dòng)畫(huà)等，可以增強(qiáng)用戶體驗(yàn)。在HTML5之前，為網(wǎng)頁(yè)添加多媒體的唯一辦法，就是使用第三方的插件（如，Adobe Flash等）。

HTML5中，提供了對(duì)多媒體的原生支持，只需通過(guò) video 元素，就可以向網(wǎng)頁(yè)嵌入視頻、電影或音頻資源，通過(guò) audio 元素向網(wǎng)頁(yè)嵌入音頻資源，省時(shí)省力。

一、視頻

在HTML5時(shí)代，在網(wǎng)頁(yè)中嵌入視頻非常簡(jiǎn)單，只需要一個(gè) video 元素，并設(shè)置它的 src 屬性，使其鏈接一個(gè)視頻地址就可以完全搞定了，這個(gè)太esay了

<video src="media/vedio.mp4"></video>

把這個(gè)網(wǎng)站在IE8中打開(kāi)一看，網(wǎng)站上除了一片空白外，什么也沒(méi)有，這是為什么呢？

原來(lái) video 是HTML5最新引入的元素，并不是所有瀏覽器都支持它，IE8及以下版本都無(wú)法識(shí)別 video 標(biāo)簽。如果瀏覽器不識(shí)別 video標(biāo)簽，則會(huì)忽略它，當(dāng)做什么都沒(méi)有。這就是網(wǎng)站上一片空白的原因。

這個(gè)問(wèn)題好解決，只需在 video 標(biāo)簽之間放置文本信息，不支持 video 標(biāo)簽的老瀏覽器，會(huì)顯示 video 標(biāo)簽之間的文本信息，以提示用戶瀏覽器不支持 video，就這么簡(jiǎn)單！

<video src="media/vedio.mp4">

你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！

</video>

在IE8上打開(kāi)一看，確實(shí)顯示了提示文本，這下好多了，至少用戶知道自己的瀏覽器不能播放視頻，該換瀏覽器了。

下載了Opera瀏覽器的最新版本25.0，打開(kāi)一看，怎么還是一片空白外！Opera瀏覽器明明是支持video標(biāo)簽的，那又是為什么呢？

這個(gè)就得從視頻的編碼格式說(shuō)起了。video 元素支持三種視頻格式：Ogg、MP4、WebM。

Ogg是帶有Theora視頻編碼和Vorbis音頻編碼的文件，后綴名為 .ogg；MP4是帶有H.264視頻編碼和AAC音頻編碼的MP4文件，后綴名為 .mp4；WebM是VP8視頻編碼和Vorbis音頻編碼的文件，后綴名為 .webm。

這個(gè)Opera瀏覽器呢，它可以支持ogg，但不支持mp4。由于Opera支持video標(biāo)簽，故video標(biāo)簽之間的文本信息沒(méi)有顯示出來(lái)，但它不支持ogg，所以就不進(jìn)行播放，最終導(dǎo)致頁(yè)面出現(xiàn)一片空白。這下可怎么辦呢？

其實(shí)辦法有的是，我們可以從網(wǎng)上下載一副圖像，放到視頻播放窗口，如果視頻無(wú)法播放，就顯示這張圖片，是不是更好呢？從網(wǎng)上下載一張美女圖片，干脆叫beauty.jpg吧。那這個(gè)圖像怎么添加到視頻窗口呢？

video標(biāo)簽有個(gè)poster 屬性，就是專門(mén)在視頻窗口放置圖片的。poster是一個(gè)video的占位符，無(wú)論什么情況下，只要視頻還沒(méi)有播放（視頻下載過(guò)程中、視頻不存在、不支持該視頻類(lèi)型、用戶點(diǎn)擊播放按鈕前），就會(huì)顯示該圖像，可以看做是視頻播放之前插入的宣傳畫(huà)或海報(bào)。

<video src="media/vedio.mp4" poster = "img/beauty.jpg">

你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！

</video>

在Opera瀏覽器上刷新一下，真的有一個(gè)美女沖著自己微笑呢。雖然視頻沒(méi)有播放出來(lái)，這回心情卻是好多了。

那我可不能一天到晚只看美女呀，視頻還是還是要想辦法播放出來(lái)的。既然Opera瀏覽器不支持mp4，我們就換成需要ogg吧，這樣就肯定沒(méi)問(wèn)題了。

我想了想，這個(gè)辦法不好，萬(wàn)一某個(gè)瀏覽器只支持支持ogg，不支持mp4呢。這年頭，什么都缺，就是不缺點(diǎn)子，隨便在網(wǎng)上一搜，辦法就有了。

在 video 元素中添加 source 元素，就可以解決這個(gè)問(wèn)題。在source 元素中，通過(guò) src 屬性指定視頻的地址，通過(guò) type 屬性指定視頻的類(lèi)型，以幫助瀏覽器決定是否能播放該視頻。并且，在 video 元素中可以添加任意多個(gè)source 元素，讓不同的 source 元素鏈接到不同的視頻文件。

這樣的話，當(dāng)瀏覽器發(fā)現(xiàn) video 元素時(shí)，首先會(huì)查看它本身是否定義了 src 屬性。如果沒(méi)有，就會(huì)檢查 source 元素。瀏覽器會(huì)逐個(gè)查看這些視頻源，直到找到一個(gè)可以播放的視頻。一旦找到，就會(huì)播放它并忽略其他的視頻源。我們干脆添加兩個(gè)source，一個(gè)是mp4，一個(gè)是ogg，這下視頻是一定能播放出來(lái)了。

<video poster = "img/beauty.jpg">

<source src="media/vedio.mp4" type="video/mp4">

<source src="media/vedio.ogg" type="video/ogg">

你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！

</video>

在Opera瀏覽器上又刷新一下，只有美女沖著我微笑，視頻還是沒(méi)播放出來(lái)。唉，太粗心了，忘記添加播放視頻的控件了。

在video標(biāo)簽中，通過(guò)添加controls 屬性來(lái)為視頻添加播放控件，方便用戶執(zhí)行播放、暫停操作和音量控制。

<video poster = "img/beauty.jpg" controls>

（此處略去500字…）

</video>

在Opera瀏覽器上又刷新一下，效果真的不一樣，這次不僅看到美女，還看到了視頻控件。用鼠標(biāo)猛戳一下那個(gè)播放按鈕，哈哈，不錯(cuò)，真的聽(tīng)到美妙的旋律。我們的ogg文件，終于播放出來(lái)了，讓我們好好享受一下吧O(∩_∩)O。

聽(tīng)了一會(huì)，忽然一想，不對(duì)呀，我剛才點(diǎn)了播放按鈕后，等了半天才聽(tīng)到聲音。能不能我一點(diǎn)播放按鈕，就立即播放呢？

原來(lái)視頻也是需要下載緩存的，點(diǎn)擊播放按鈕后，首先緩存，然后才播放的。那能不能在頁(yè)面加載的同時(shí)就緩存呢。這樣，用戶點(diǎn)擊播放后，就不必等待了。

這當(dāng)然可以，在video標(biāo)簽中，通過(guò)添加preload屬性來(lái)為視頻添加預(yù)加載功能，在頁(yè)面加載的同時(shí)加載視頻。

<video poster = "img/beauty.jpg" controls preload>

（此處略去500字…）

</video>

關(guān)于 preload 屬性，稍微再啰嗦一點(diǎn)，就是可以把它設(shè)置為 metadata，讓瀏覽器僅僅預(yù)加載視頻的基本信息，如尺寸、時(shí)長(zhǎng)、以及一些關(guān)鍵的幀。這樣的話，在開(kāi)始播放之前，瀏覽器可以提前計(jì)算視頻的顯示尺寸。

既然一切都OK了！讓我們看看mp4是不是能正常播放。下載最新版的Google Chrome 38.0瀏覽器，打開(kāi)網(wǎng)頁(yè)，猛戳一下播放按鈕。

等等~，等等~，不對(duì)，怎么只有聲音沒(méi)有畫(huà)面，明明是mp4格式的文件呀？使用暴風(fēng)影音試了一下，是有畫(huà)面的呀！

辛辛苦苦又在網(wǎng)上搜了一番，花了整整586秒，終于找到了答案。mp4視頻需要h.264編碼格式才會(huì)有圖像的。

找了一個(gè) h.264 編碼格式的 mp4 試了一下，不錯(cuò)，確實(shí)有圖像了！看了半天，原來(lái)是一部老外的電影，嘰里咕嚕一陣，一句話也沒(méi)聽(tīng)懂。那O(∩_∩)O~，能否提供中文字幕呢，這樣就不必費(fèi)老大勁去聽(tīng)了！

HTML5中，通過(guò)在video元素添加track元素為視頻添加字幕。字幕文件有兩種格式：WebVTT和TTML。WebVTT是Web視頻文本軌跡（Web Video Text Track），是UTF-8編碼格式的文本文件；TTML是時(shí)序文本標(biāo)記語(yǔ)言（Timed Text Markup Language），是XML格式的文件。兩種文件的具體格式，已經(jīng)超出我們的討論范圍。

video元素支持添加多個(gè)track元素，不同的track元素鏈接到不同的字幕文件。用戶可以在各個(gè)字幕間進(jìn)行切換。

<video poster = "img/beauty.jpg" controls preload>

<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>

<track src="cn_track.vtt" kind="captions" srclang="zh" label="簡(jiǎn)體中文">

</video>

track元素中，src屬性指定字幕文件的URL；srclang屬性字幕文件的語(yǔ)言類(lèi)型，若kind 屬性值是 "subtitles" 時(shí)，該屬性必需的；label 屬性指定字幕標(biāo)簽，每個(gè)字幕元素必需設(shè)置一個(gè)唯一不重復(fù)的標(biāo)簽，切換字幕時(shí)，會(huì)顯示標(biāo)簽的名稱；kind指定字幕內(nèi)容類(lèi)型，只能是subtitles、captions、descriptions、chapters、metadata 之一；default屬性指定是否是默認(rèn)字幕，如果一個(gè)都沒(méi)指定，將不會(huì)自動(dòng)顯示字幕。

除了字幕外，我還希望對(duì)視頻進(jìn)行過(guò)多的控制，比如讓視頻自動(dòng)播放、循環(huán)播放、默認(rèn)靜音，以及視頻窗口的尺寸等等，這些都能做到嗎？

這已經(jīng)不是什么事了，video 元素已經(jīng)提供了相關(guān)屬性，根據(jù)需要設(shè)置相應(yīng)的屬性就可以了。這些屬性及含義見(jiàn)表 23：

哦，原來(lái)這么簡(jiǎn)單呀！那就到此為止吧，網(wǎng)頁(yè)中嵌入視頻的全部代碼都在這里，就打包給你吧！

<video width="300" poster="img/beauty.jpg" controls preload autoplay loop muted>

<source src="media/vedio.mp4">

<source src="media/vedio.ogg">

<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>

<track src="cn_track.vtt" kind="captions" srclang="zh" label="簡(jiǎn)體中文">

你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！

</video>

睜大眼睛一看，卻只有7行代碼。然而，就這區(qū)區(qū)7行代碼，可把他折磨得夠嗆。

看著這一切都全部搞定，他仰望著天空，長(zhǎng)長(zhǎng)呼了一口氣，顯得是那么的放松，那么的愜意。此時(shí)，他閉上眼睛，在自己的夢(mèng)幻世界里遨游！

二、音頻

有了在網(wǎng)頁(yè)中嵌入視頻的經(jīng)歷，要在網(wǎng)頁(yè)中嵌入音頻，那簡(jiǎn)直就是小菜一碟了。只要把vedio元素?fù)Q成 audio 元素，就全部搞定。

但需要了解的是，audio 所支持的音頻格式只有Ogg Vorbis、mp3 和 wav。還要知道，由于音頻沒(méi)有畫(huà)面，也就沒(méi)有 width、height、poster 屬性，而其他屬性都支持，并且跟視頻的含義相同。

網(wǎng)頁(yè)中嵌入音頻的代碼如下：

<audio controls preload autoplay loop muted>

<source src="media/audio.mp3">

<source src="media/audio.wav">

<source src="media/audio.ogg">

你的瀏覽器已經(jīng)老掉牙了，不支持audio，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！

</audio>