[譯] HTML5 媒體源擴展（MSE）：把影視製做級別的視頻格式帶入 Web

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

在過去的十幾年，像Flash和Silverlight這樣的插件爲瀏覽器開啓了豐富的視頻功能，壯大了一批視頻服務商，如Youtube、Netflix。可是，最近幾年的風向卻開始轉向了HTML5.

大概2年前，W3C組織發佈了最終的HTML5標準,其中提供了一組新的HTML元素和APIs,特別是video方面。其中一些旨在爲網頁增長更多的語義，但不引入新的功能。還有一些擴展了web的可能性，並提升了開發者開發原生web應用可能性，不使用plugins，如Adobe Flash, Microsoft Silverlight 或者 Java。

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

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

• <canvas>提供了腳本渲染圖形，遊戲圖形等功能。這也叫作Canvas JavaScript API。cancas元素也能夠與WebGL結合經過顯卡的GPU，來渲染2D和3D圖形。

• <video>實現了即開即用的視屏播放，很牛叉是吧。這也讓在Web上實現無插件媒體播放變得可行。實際上，各家瀏覽器廠商好像都贊成用使用一種視頻格式-MPEG-4/H.264，這在全部瀏覽器中已經廣泛支持了。不過Opera Mini是一個例外。

• <audio>實現了在Web網頁上即開即用的音頻播放。與視頻播放同樣，支持什麼樣的格式和編碼要看不一樣的瀏覽器廠商。

• <track>用於定時文本內容顯示，例如視頻中的字幕和提示。WebVTT文件是開箱即用的。

其實大多數新的元素已經很熟悉了，並且使用了一些日子了。這時由於全部的主流瀏覽器早就開始支持了。雖然如今規範已經穩定，但W3C仍是有不少工做要作。

對於我來講，最重要的標準就是W3C還在制定中的媒體源擴展標準（MSEs），該標準如今已經進入了「備選推薦」狀態。這些JavaScript API將容許咱們爲<video>、<audio>或其餘元素解析媒體流，從而實現自適應碼率的標準，好比只靠HTML5和JavaScript開發的MPEG-DASH。

還有一個值得關注的是加密媒體擴展標準,其支持用原生HTML5和JavaScript開發播放加密視頻。不過，目前這還僅僅是個研究草案，還須要一點時間才能發佈。

咱們很是歡迎新的標準，期待着不再用安裝各色Flash播放器或者插件，只開發一個Web版本的就能夠在任何設備上享受多媒體內容的一天。

爲何是 MPEG-DASH?

讓我先簡單的介紹如下 MPEG-DASH格式以及爲何會被用在HTML5中。MPEG-DASH（DASH是經過HTTP的動態自適應流的縮寫）是由MPEG和ISO（ISO / IEC 23009-1）批准的國際，瀏覽器廠商獨立標準。早先的自適應流技術（例如Apple HLS，Microsoft Smooth Streaming和Adobe HDS）由軟件公司獨立發佈，僅支持自身的流媒體服務標準或者播放客戶端。基於某一家公司標準來推廣顯然是不可取的，所以標準化組織推進各家廠商進行協調，這纔有了在2012年推出的MPEG-DASH。

再看一下MPEG-DASH的目標和優勢：

• 在視頻播放期間減小啓動延遲以及緩衝和停頓。

• 持續適應客戶端的帶寬狀況。

• 經過客戶端開發的流處理邏輯，來達到最好的擴展性和靈活性。

• 能夠配合CDN下降成本，並使用代理以及緩存服務。

• 經過使用HTTP有效地繞過NAT和防火牆。

• 經過信令、分發以及同源多併發的DRM方案來實現一種通用加密方法。

• 實現流媒體簡單的拼接，以及廣告內容在指定位置插入功能。

• 更好的支持「特效模式」

• 其餘

近幾年，MPEG-DASH已經集成到新的標準化工做中，好比HTML5的MSE，MSE能夠經過HTML5的video和audio標籤實現DASH播放，以及HTML5加密多媒體格式擴展，即在瀏覽器中播放用DRM加密的多媒體內容。此外，MPEG-DASH中的DRM加密方式能夠很好的協調其餘的通用加密系統，如MPEG-CENC。而且MPEG-DASH還能夠很容易的經過Hybrid方式的廣播寬帶電視集成到不一樣的只能電視平臺上，如HbbTV 1.5 和 HbbTV 2.0。

此外，MPEG-DASH標準的使用方法已經被DASH行業社區以及DASH-AVC/264組織所推薦，同時，像DASH-HEVC/265這樣前瞻性的計劃，也已經推薦使用MPEG-DASH結合H.265/HEVC這樣的方式。

視頻流標準的生態圈 (Image: Bitcodin) (大圖點擊)

今天，MPEG-DASH已經愈來愈多的被部署，而且隨着Netflix以及Google這樣的服務商的不斷升級，他們都已經開始轉向MPEG-DASH這一標準。依靠這兩個主要的流量來源，MPEG-DASH先進已佔整個互聯網總流量的50%。

MSEs是如何工做的?

如今，讓咱們深刻的去了解一下MSEs，以及開發者如何使用他們。MSEs是HTMLMediaElement元素的擴展規範，經過它可讓JavaScript有能力去動態處理video和audio 這樣的媒體流。這種功能在過去是不可能的，由於之前這些媒體標籤只能加載MP4這樣的完整文件。這種方法也被稱爲漸進式流處理，或者漸進式下載，由於媒體文件的下載和播放並行工做，開啓了pseudo-streaming模式。

但是，這隻帶來了不好的搜索能力，而且根本沒有辦法來實現根據用戶的帶寬情況調整視頻音頻的清晰度。經過由JavaScript處理過的媒體數據，再輸入給video和audio標籤，這樣開發者動態適應視頻數據對應上用戶的環境，從而提高媒體播放的體驗。

如上所述，MPEG-DASH是MSEs的一種媒體傳輸格式的實現。那讓咱們瞭解一下基於HTML5 MSE的視頻播放器的工做步驟：

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

2. 評估客戶端設備上的可用帶寬，選擇適當的視頻質量以實現無緩衝流，截止在用JavaScript來下載後續的媒體片斷。

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

4. 底層硬件拿到了這部分緩存，就開始進行解碼以及渲染視頻，把結果返回給video標籤。

這就是一種Netflix和Youtube都在使用的基於HTML5的自適應媒體播放。像dash.js 和 Bitdash HTML5 player都是現今至關成熟的解決方案，這就讓開發者和視頻內容商很輕鬆的切換到HTML5的自適應碼率播放方案，同時DASH-IF項目是開源的。

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

不過這樣，MSEs並不只限支持MPEG-DASH。有愈來愈多的項目（如hls.js）和播放器（如Bitdash）都已經實現了經過H5的MSEs方式來支持Apple的HLS格式。他們經過多路轉換方式把HLS媒體片斷（即MPEG2-TS內容）轉成HTML5 和 MPEG-DASH能夠處理的符合ISO的媒體文件格式。

DRM加密媒體擴展

主要變化發生在DRM市場，因爲Chrome 和 Firefox中NPAPI插件的減小，致使向Silverlight這種，DRM系統的領先者開始失去優點。這使得大多數的專業內容供應商處境變得十分困難，由於他們必須轉換新技術，找到一個面向將來的新解決方案。

專業流媒體發佈商將沒法依靠微軟的PlayReady DRM技術在PC和安卓設備上的Chrome、火狐來加密本身的內容。他們必須從新評估他們的內容保護和流平臺戰略，而且找到一種新的解決方案，快速切換過去。

對許多視頻服務商來講，MPEG-DASH已是最好的技術選型。DASH項目以愈來愈快的速度推出，使用Widevine DRM的MES和EME看起來是最可行的替代方案。此外，MPEG-CENC能夠支持不一樣的DRM系統都只支持同一版本的加密內容，而且，EME的內容是基於MSE的MPEG-DASH內容格式。

所以，不一樣的DRM系統組合，如用於Chrome和安卓的Widevine Modular，用於IE和Edge的Microsoft PlayReady，還有用於Firefox的Adobe Primetime。因爲每個平臺都要有一個版本，這使得內容供應商有了更多的動機去轉向MPEG-DASH做爲國際標準，由於它對流媒體、DRM以及CDN都具備更好的靈活性。

瀏覽器對於MSEs和EMEs的支持狀況

瀏覽器廠家在經歷了不少年對HTML5以及MSE的緩慢適配以後，咱們很高興的看到現在大多數的主流瀏覽器都已經支持了。這樣的過程，也一樣會發生在EME身上，雖然目前各家廠商都有本身的DRM系統，這讓目前的DRM的生態系統變得有點複雜。

儘管如此，要覆蓋99%的用戶，咱們須要作一個視頻流兼容設置，這樣也可讓那些不支持MSE的瀏覽器也能順利播放，好比一些舊版本的瀏覽器，和iOS上的Safari。老的瀏覽器可使用Flash播放器來提供服務，Flash播放器是能夠直接播放MSE的MPEG-DASH格式內容的，如Bitdash player播放器。爲了支持iOS設備，咱們必需要使用Apple的HLS流媒體格式，這是蘋果在HTML5中強推的另外一種方式。Apple並不喜歡支持開放標準（如MSE），不過Mac OSX上的Safari仍是支持MSE的。

下面的列表介紹瞭如今主流的瀏覽器對MSE和EME支持的現狀，由Bitmovin提供:

Environment	Player Technology	Media	DRM
Chrome	HTML5 MSE	MPEG-DASH	Widevine Modular
Internet Explorer 11 Windows 8.1	HTML5 MSE	MPEG-DASH	PlayReady
Internet Explorer (other)	Flash, Silverlight	MPEG-DASH	ClearKey, PlayReady
Edge	HTML5 MSE, HTML5 HLS	MPEG-DASH, HLS	PlayReady, AES HLS
Firefox	HTML5 MSE	MPEG-DASH	Adobe
Safari	HTML5 MSE, HTML5 HLS	MPEG-DASH, HLS	Fairplay, AES
Android: Web > v4.1	HTML5 MSE, HTML5 HLS	MPEG-DASH, HLS	Widevine Modular
Android: app	Google’s Exoplayer	MPEG-DASH, HLS	Widevine Modular
iOS: web	HTML5 HLS	HLS	AES
iOS: app	native HLS support	HLS	Fairplay, AES
smart TV	Native MPEG-DASH support or HTML5 MSE (e.g. Tizen)	MPEG-DASH or HLS	Device-dependent
HbbTV (1.5)	native MPEG-DASH support	MPEG-DASH	device-dependent

HTML5 Video的將來

新的媒體解碼器正在進入市場，這使得視頻壓縮效率變得更高，這對於那些高質量的格式（如4K和UHD）以及那些移動端設備的流媒體尤其重要。最多見的編解碼器是HEVC/h.265，它是十幾年至今一直選用的默認編解碼格式（固然若是他的專利確定不發生變化）。同時他還能夠利用瀏覽器內置的MSEs進行播放，並使用MPEG-DASH做爲流格式，這代表了這種開發標準的靈活性。

視頻播放器的開發者值須要啓動一種簡單的適配，好比在建立SourceBuffer時改變編解碼器的屬性。而且，瀏覽器底層已經集成了HEVC解碼（最有多是硬件解碼器），那麼你就能夠在HTML5中觀看基於HEVC MPEG-DASH的流媒體。咱們已經成功在在一些瀏覽器中測試過了，好比Microsoft Edge，其已經支持了HEVC；並且Google最近聲稱它的Chromium browser也會支持。

然而，HEVC還不能爲絕大多數互聯網視頻資源所用，並且也只有很少的一部分設備能支出對其的硬解碼。固然，它並非世界上惟一的一種編解碼器。VP9，一種開放的免版稅的視頻編碼格式（VP8的繼任者），它旨在提供更好的編碼效率，如今諸如Google Chrome和Microsoft Edge這些主流瀏覽器已經支持VP9，而且VP9能夠很好的與MSE兼容。不過，咱們並不能預見將來那些編解碼器會成爲咱們的主流。但無論是VP8/9, AVC 仍是 HEVC，MSEs和MPEG-DASH都已經準備好了！

如今，360度視頻即將普及，這能夠很是直觀的經過HTML5來觀看。開發者能夠利用MSE的流自適應功能來實現360度視頻的體驗，只須要結合一些JavaScript代碼或WebGL渲染層。最近，我作了一個小演講,是關於如何用HTML5，JavaScript，DASH以及WebGL實現一套跟Netflix服務相似的虛擬現實系統。

小結

我但願這篇文章可讓你大概的瞭解一下網絡視頻的現狀和將來。MSE跟EME是網絡視頻邁向開放生態系統的重要一步，他們取代了Flash和Silverlight。此外，HTML5技術已經被現現在各類平臺所選用，包括桌面端，移動端，還有智能電視平臺。

結合像MPEG-DASH這樣的流媒體標準，視頻內容供應商還能夠在不一樣平臺和設備之間擁有統一的視頻解決方案。他們能夠經過自適應流媒體格式來防止發生緩衝，減小視頻加載時間，提升用戶觀看體驗，並根據每個用戶自身的帶寬和設備狀況提供最匹配的視頻畫質。