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

英文原文：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 JavaScript API。cancas元素也可以與WebGL結合通過顯卡的GPU，來渲染2D和3D圖形。

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

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

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

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

對于我來說，最重要的標準就是W3C還在制定中的媒體源擴展標準（MSEs），該標準現在已經進入了“備選推薦”狀態。這些JavaScript API將允許我們為、或其他元素解析媒體流，從而實現自適應碼率的標準，比如只靠HTML5和JavaScript開發的MPEG-DASH。

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

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

讓我先簡單的介紹以下 MPEG-DASH格式以及為什么會被用在HTML5中。MPEG-DASH（DASH是通過HTTP的動態自適應流的縮寫）是由MPEG和ISO（ISO / IEC 23009-1）批準的國際，瀏覽器廠商獨立標準。早先的自適應流技術（例如Apple HLS，Microsoft Smooth Streaming和Adobe HDS）由軟件公司獨立發布，僅支持自身的流媒體服務標準或者播放客戶端?；谀骋患夜緲藴蕘硗茝V顯然是不可取的，因此標準化組織推動各家廠商進行協調，這才有了在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是HTMLMediaElement元素的擴展規范，通過它可以讓JavaScript有能力去動態處理video和audio 這樣的媒體流。這種功能在過去是不可能的，因為以前這些媒體標簽只能加載MP4這樣的完整文件。這種方法也被稱為漸進式流處理，或者漸進式下載，因為媒體文件的下載和播放并行工作，開啟了pseudo-streaming模式。

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

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

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

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

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

底層硬件拿到了這部分緩存，就開始進行解碼以及渲染視頻，把結果返回給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市場，由于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都具有更好的靈活性。

瀏覽器廠家在經歷了很多年對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提供:

新的媒體解碼器正在進入市場，這使得視頻壓縮效率變得更高，這對于那些高質量的格式（如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這樣的流媒體標準，視頻內容供應商還可以在不同平臺和設備之間擁有統一的視頻解決方案。他們可以通過自適應流媒體格式來防止發生緩沖，減少視頻加載時間，提高用戶觀看體驗，并根據每一個用戶自身的帶寬和設備情況提供最匹配的視頻畫質。