摘要：還有一個值得關(guān)注的是加密媒體擴展標(biāo)準(zhǔn)其支持用原生和開發(fā)播放加密視頻。專業(yè)流媒體發(fā)布商將無法依靠微軟的技術(shù)在和安卓設(shè)備上的火狐來加密自己的內(nèi)容。因此，不同的系統(tǒng)組合，如用于和安卓的，用于和的，還有用于的。

英文原文：HTML5 Media Source Extensions: Bringing Production Video To The Web

在過去的十幾年，像Flash和Silverlight這樣的插件為瀏覽器開啟了豐富的視頻功能，壯大了一批視頻服務(wù)商，如Youtube、Netflix。但是，最近幾年的風(fēng)向卻開始轉(zhuǎn)向了HTML5.

大概2年前，W3C組織發(fā)布了最終的HTML5標(biāo)準(zhǔn),其中提供了一組新的HTML元素和APIs,特別是video方面。其中一些旨在為網(wǎng)頁增加更多的語義，但不引入新的功能。還有一些擴展了web的可能性，并提高了開發(fā)者開發(fā)原生web應(yīng)用可能性，不使用plugins，如Adobe Flash, Microsoft Silverlight 或者 Java。

這對前端開發(fā)來說非常重要，因為Google已經(jīng)宣布廢除NPAPI（一種plugins使用的API），同時Firefox和Microsoft方面都號召要無插件瀏覽web。雖然這些廠商都還支持Flash player,但淘汰掉它看上去只是時間的問題。此外，對于移動端的瀏覽器來說，他們已經(jīng)跨過了這一步，因為他們本來就不支持插件方式，根本就沒有Flash player。

讓我們看一下這些新的HTML5元素以及他們對video方面的影響：

提供了腳本渲染圖形，游戲圖形等功能。這也叫做Canvas JavaScript API。cancas元素也可以與WebGL結(jié)合通過顯卡的GPU，來渲染2D和3D圖形。

實現(xiàn)了即開即用的視屏播放，很牛叉是吧。這也讓在Web上實現(xiàn)無插件媒體播放變得可行。實際上，各家瀏覽器廠商好像都同意用使用一種視頻格式-MPEG-4/H.264，這在所有瀏覽器中已經(jīng)普遍支持了。不過Opera Mini是一個例外。

實現(xiàn)了在Web網(wǎng)頁上即開即用的音頻播放。與視頻播放一樣，支持什么樣的格式和編碼要看不同的瀏覽器廠商。

用于定時文本內(nèi)容顯示，例如視頻中的字幕和提示。WebVTT文件是開箱即用的。

其實大多數(shù)新的元素已經(jīng)很熟悉了，而且使用了一些日子了。這時因為所有的主流瀏覽器早就開始支持了。雖然現(xiàn)在規(guī)范已經(jīng)穩(wěn)定，但W3C還是有很多工作要做。

對于我來說，最重要的標(biāo)準(zhǔn)就是W3C還在制定中的媒體源擴展標(biāo)準(zhǔn)（MSEs），該標(biāo)準(zhǔn)現(xiàn)在已經(jīng)進入了“備選推薦”狀態(tài)。這些JavaScript API將允許我們?yōu)?b>

還有一個值得關(guān)注的是加密媒體擴展標(biāo)準(zhǔn),其支持用原生HTML5和JavaScript開發(fā)播放加密視頻。不過，目前這還僅僅是個研究草案，還需要一點時間才能發(fā)布。

我們非常歡迎新的標(biāo)準(zhǔn)，期待著再也不用安裝各色Flash播放器或者插件，只開發(fā)一個Web版本的就可以在任何設(shè)備上享受多媒體內(nèi)容的一天。

讓我先簡單的介紹以下 MPEG-DASH格式以及為什么會被用在HTML5中。MPEG-DASH（DASH是通過HTTP的動態(tài)自適應(yīng)流的縮寫）是由MPEG和ISO（ISO / IEC 23009-1）批準(zhǔn)的國際，瀏覽器廠商獨立標(biāo)準(zhǔn)。早先的自適應(yīng)流技術(shù)（例如Apple HLS，Microsoft Smooth Streaming和Adobe HDS）由軟件公司獨立發(fā)布，僅支持自身的流媒體服務(wù)標(biāo)準(zhǔn)或者播放客戶端。基于某一家公司標(biāo)準(zhǔn)來推廣顯然是不可取的，因此標(biāo)準(zhǔn)化組織推動各家廠商進行協(xié)調(diào)，這才有了在2012年推出的MPEG-DASH。

再看一下MPEG-DASH的目標(biāo)和優(yōu)點：

在視頻播放期間減少啟動延遲以及緩沖和停頓。

持續(xù)適應(yīng)客戶端的帶寬情況。

通過客戶端開發(fā)的流處理邏輯，來達到最好的擴展性和靈活性。

可以配合CDN降低成本，并使用代理以及緩存服務(wù)。

通過使用HTTP有效地繞過NAT和防火墻。

通過信令、分發(fā)以及同源多并發(fā)的DRM方案來實現(xiàn)一種通用加密方法。

實現(xiàn)流媒體簡單的拼接，以及廣告內(nèi)容在指定位置插入功能。

更好的支持“特效模式”

其他

近幾年，MPEG-DASH已經(jīng)集成到新的標(biāo)準(zhǔn)化工作中，比如HTML5的MSE，MSE可以通過HTML5的video和audio標(biāo)簽實現(xiàn)DASH播放，以及HTML5加密多媒體格式擴展，即在瀏覽器中播放用DRM加密的多媒體內(nèi)容。此外，MPEG-DASH中的DRM加密方式可以很好的協(xié)調(diào)其他的通用加密系統(tǒng)，如MPEG-CENC。并且MPEG-DASH還可以很容易的通過Hybrid方式的廣播寬帶電視集成到不同的只能電視平臺上，如HbbTV 1.5 和 HbbTV 2.0。

此外，MPEG-DASH標(biāo)準(zhǔn)的使用方法已經(jīng)被DASH行業(yè)社區(qū)以及DASH-AVC/264組織所推薦，同時，像DASH-HEVC/265這樣前瞻性的計劃，也已經(jīng)推薦使用MPEG-DASH結(jié)合H.265/HEVC這樣的方式。

視頻流標(biāo)準(zhǔn)的生態(tài)圈 (Image: Bitcodin) (大圖點擊)

今天，MPEG-DASH已經(jīng)越來越多的被部署，并且隨著Netflix以及Google這樣的服務(wù)商的不斷升級，他們都已經(jīng)開始轉(zhuǎn)向MPEG-DASH這一標(biāo)準(zhǔn)。依靠這兩個主要的流量來源，MPEG-DASH先進已占整個互聯(lián)網(wǎng)總流量的50%。

現(xiàn)在，讓我們深入的去了解一下MSEs，以及開發(fā)者如何使用他們。MSEs是HTMLMediaElement元素的擴展規(guī)范，通過它可以讓JavaScript有能力去動態(tài)處理video和audio 這樣的媒體流。這種功能在過去是不可能的，因為以前這些媒體標(biāo)簽只能加載MP4這樣的完整文件。這種方法也被稱為漸進式流處理，或者漸進式下載，因為媒體文件的下載和播放并行工作，開啟了pseudo-streaming模式。

可是，這只帶來了很差的搜索能力，并且根本沒有辦法來實現(xiàn)根據(jù)用戶的帶寬狀況調(diào)整視頻音頻的清晰度。通過由JavaScript處理過的媒體數(shù)據(jù)，再輸入給video和audio標(biāo)簽，這樣開發(fā)者動態(tài)適應(yīng)視頻數(shù)據(jù)對應(yīng)上用戶的環(huán)境，從而提升媒體播放的體驗。

如上所述，MPEG-DASH是MSEs的一種媒體傳輸格式的實現(xiàn)。那讓我們了解一下基于HTML5 MSE的視頻播放器的工作步驟：

下載并解析配置文件，MPEG-DASH中使用MPD文件（HLS中使用m3u8文件），配置文件中提供了視頻流的詳細(xì)信息，諸如視頻流的碼率質(zhì)量種類，分辨率數(shù)量，音頻數(shù)據(jù)數(shù)量，字幕數(shù)量等，以及媒體文件數(shù)據(jù)塊的名字，源服務(wù)器或者CDN的信息。

評估客戶端設(shè)備上的可用帶寬，選擇適當(dāng)?shù)囊曨l質(zhì)量以實現(xiàn)無緩沖流，截止在用JavaScript來下載后續(xù)的媒體片段。

JavaScript代碼將下載的媒體片段移交到MSE的緩存中處理。

底層硬件拿到了這部分緩存，就開始進行解碼以及渲染視頻，把結(jié)果返回給video標(biāo)簽。

這就是一種Netflix和Youtube都在使用的基于HTML5的自適應(yīng)媒體播放。像dash.js 和 Bitdash HTML5 player都是現(xiàn)今相當(dāng)成熟的解決方案，這就讓開發(fā)者和視頻內(nèi)容商很輕松的切換到HTML5的自適應(yīng)碼率播放方案，同時DASH-IF項目是開源的。

MPEG-DASH的支持的格式全部都來自如x264 和 MP4Box這樣的開源工具，也有部分來自一些商業(yè)編碼服務(wù)，如 Bitcodin。

不過這樣，MSEs并不僅限支持MPEG-DASH。有越來越多的項目（如hls.js）和播放器（如Bitdash）都已經(jīng)實現(xiàn)了通過H5的MSEs方式來支持Apple的HLS格式。他們通過多路轉(zhuǎn)換方式把HLS媒體片段（即MPEG2-TS內(nèi)容）轉(zhuǎn)成HTML5 和 MPEG-DASH可以處理的符合ISO的媒體文件格式。

主要變化發(fā)生在DRM市場，由于Chrome 和 Firefox中NPAPI插件的減少，導(dǎo)致向Silverlight這種，DRM系統(tǒng)的領(lǐng)先者開始失去優(yōu)勢。這使得大多數(shù)的專業(yè)內(nèi)容供應(yīng)商處境變得十分困難，因為他們必須轉(zhuǎn)換新技術(shù)，找到一個面向未來的新解決方案。

專業(yè)流媒體發(fā)布商將無法依靠微軟的PlayReady DRM技術(shù)在PC和安卓設(shè)備上的Chrome、火狐來加密自己的內(nèi)容。他們必須重新評估他們的內(nèi)容保護和流平臺戰(zhàn)略，并且找到一種新的解決方案，快速切換過去。

對許多視頻服務(wù)商來說，MPEG-DASH已經(jīng)是最好的技術(shù)選型。DASH項目以越來越快的速度推出，使用Widevine DRM的MES和EME看起來是最可行的替代方案。此外，MPEG-CENC可以支持不同的DRM系統(tǒng)都只支持同一版本的加密內(nèi)容，并且，EME的內(nèi)容是基于MSE的MPEG-DASH內(nèi)容格式。

因此，不同的DRM系統(tǒng)組合，如用于Chrome和安卓的Widevine Modular，用于IE和Edge的Microsoft PlayReady，還有用于Firefox的Adobe Primetime。由于每一個平臺都要有一個版本，這使得內(nèi)容供應(yīng)商有了更多的動機去轉(zhuǎn)向MPEG-DASH作為國際標(biāo)準(zhǔn)，因為它對流媒體、DRM以及CDN都具有更好的靈活性。

瀏覽器廠家在經(jīng)歷了很多年對HTML5以及MSE的緩慢適配之后，我們很高興的看到如今大多數(shù)的主流瀏覽器都已經(jīng)支持了。這樣的過程，也同樣會發(fā)生在EME身上，雖然目前各家廠商都有自己的DRM系統(tǒng)，這讓目前的DRM的生態(tài)系統(tǒng)變得有點復(fù)雜。

盡管如此，要覆蓋99%的用戶，我們需要做一個視頻流兼容設(shè)置，這樣也可以讓那些不支持MSE的瀏覽器也能順利播放，比如一些舊版本的瀏覽器，和iOS上的Safari。老的瀏覽器可以使用Flash播放器來提供服務(wù)，F(xiàn)lash播放器是可以直接播放MSE的MPEG-DASH格式內(nèi)容的，如Bitdash player播放器。為了支持iOS設(shè)備，我們必須要使用Apple的HLS流媒體格式，這是蘋果在HTML5中強推的另一種方式。Apple并不喜歡支持開放標(biāo)準(zhǔn)（如MSE），不過Mac OSX上的Safari還是支持MSE的。

下面的列表介紹了現(xiàn)在主流的瀏覽器對MSE和EME支持的現(xiàn)狀，由Bitmovin提供:

新的媒體解碼器正在進入市場，這使得視頻壓縮效率變得更高，這對于那些高質(zhì)量的格式（如4K和UHD）以及那些移動端設(shè)備的流媒體尤為重要。最常見的編解碼器是HEVC/h.265，它是十幾年至今一直選用的默認(rèn)編解碼格式（當(dāng)然如果他的專利肯定不發(fā)生變化）。同時他還可以利用瀏覽器內(nèi)置的MSEs進行播放，并使用MPEG-DASH作為流格式，這表明了這種開發(fā)標(biāo)準(zhǔn)的靈活性。

視頻播放器的開發(fā)者值需要啟動一種簡單的適配，比如在創(chuàng)建SourceBuffer時改變編解碼器的屬性。并且，瀏覽器底層已經(jīng)集成了HEVC解碼（最有可能是硬件解碼器），那么你就可以在HTML5中觀看基于HEVC MPEG-DASH的流媒體。我們已經(jīng)成功在在一些瀏覽器中測試過了，比如Microsoft Edge，其已經(jīng)支持了HEVC；而且Google最近聲稱它的Chromium browser也會支持。

然而，HEVC還不能為絕大多數(shù)互聯(lián)網(wǎng)視頻資源所用，而且也只有不多的一部分設(shè)備能支出對其的硬解碼。當(dāng)然，它并不是世界上唯一的一種編解碼器。VP9，一種開放的免版稅的視頻編碼格式（VP8的繼任者），它旨在提供更好的編碼效率，現(xiàn)在諸如Google Chrome和Microsoft Edge這些主流瀏覽器已經(jīng)支持VP9，并且VP9可以很好的與MSE兼容。不過，我們并不能預(yù)見未來那些編解碼器會成為我們的主流。但不管是VP8/9, AVC 還是 HEVC，MSEs和MPEG-DASH都已經(jīng)準(zhǔn)備好了！

現(xiàn)在，360度視頻即將普及，這可以非常直觀的通過HTML5來觀看。開發(fā)者可以利用MSE的流自適應(yīng)功能來實現(xiàn)360度視頻的體驗，只需要結(jié)合一些JavaScript代碼或WebGL渲染層。最近，我做了一個小演講,是關(guān)于如何用HTML5，JavaScript，DASH以及WebGL實現(xiàn)一套跟Netflix服務(wù)類似的虛擬現(xiàn)實系統(tǒng)。

我希望這篇文章可以讓你大概的了解一下網(wǎng)絡(luò)視頻的現(xiàn)狀和未來。MSE跟EME是網(wǎng)絡(luò)視頻邁向開放生態(tài)系統(tǒng)的重要一步，他們?nèi)〈薋lash和Silverlight。此外，HTML5技術(shù)已經(jīng)被現(xiàn)如今各種平臺所選用，包括桌面端，移動端，還有智能電視平臺。

結(jié)合像MPEG-DASH這樣的流媒體標(biāo)準(zhǔn)，視頻內(nèi)容供應(yīng)商還可以在不同平臺和設(shè)備之間擁有統(tǒng)一的視頻解決方案。他們可以通過自適應(yīng)流媒體格式來防止發(fā)生緩沖，減少視頻加載時間，提高用戶觀看體驗，并根據(jù)每一個用戶自身的帶寬和設(shè)備情況提供最匹配的視頻畫質(zhì)。