HTML5 媒體源擴展：將製作視頻帶到 Web

在過去十年中，Flash 和 Silverlight 等插件在瀏覽器中實現了豐富的視頻消費，為 YouTube 和 Netflix 等流行服務提供了動力。 然而，這種方法在過去幾年中已經轉向 HTML5。

大約兩年前，W3C 發布了 HTML5 規範的最終建議，其中包含一組新的 HTML 元素和 API，尤其是視頻。 其中一些旨在網頁中的更多語義，但不引入新功能。 其他擴展了 Web 的可能性並增強了開發人員的可能性，而無需諸如 Adob​​e Flash、Microsoft Silverlight 或 Java 之類的插件。

關於 SmashingMag 的進一步閱讀：

• 使用 Web 技術提供原生體驗
• 為 HTML5 詳細信息元素製作完整的 Polyfill
• 漸進式 Web 應用程序初學者指南
• HTML5 標誌：你怎麼看？

這一點尤其重要，因為例如，谷歌已經宣布刪除 NPAPI（這些插件使用的 API），Firefox 也是如此，微軟也提倡無插件瀏覽。 儘管這些供應商仍然提供 Flash 播放器，但他們不提供可能只是時間問題。 此外，移動設備上的瀏覽器更進一步，因為它們中的大多數不支持插件並且沒有 Flash 播放器。

讓我們看看一些新的 HTML5 元素以及它們對視頻的改進：

• <canvas>提供腳本來渲染圖形、遊戲圖形等。 這有時被稱為 Canvas JavaScript API。 canvas元素也可以與 WebGL 一起使用，使用顯卡的 GPU 渲染 2D 和 3D 圖形。
• <video>支持開箱即用的視頻播放，非常棒。 這最終使網絡上的無插件多媒體成為現實。 事實上，瀏覽器供應商似乎同意一種格式——MPEG-4/H.264，現代瀏覽器普遍支持這種格式，Opera Mini 除外。
• <audio>可以在網頁上播放開箱即用的音頻內容。 與視頻一樣，支持哪些容器格式和編解碼器由瀏覽器供應商決定。
• <track>可用於定時文本軌道，例如視頻中的字幕和標題。 開箱即用支持 WebVTT 文件。

大多數新元素已經在 HTML5 視頻播放器代碼中為人所知並使用了一段時間，因為它們已在所有現代瀏覽器中實現。 規格穩定。 儘管如此，W3C 還有很多工作要做。

對我來說，W3C 正在製定的最重要的標準是“媒體源擴展”（MSE）標準，目前它的狀態是“候選推薦”。 此 JavaScript API 允許我們為<video> 、 <audio>和其他元素生成媒體流，從而支持純 HTML5 和 JavaScript 中的 MPEG-DASH 等自適應流媒體標準。

另一個有趣的是“加密媒體擴展”標準，它允許播放 HTML5 和 JavaScript 中的受保護內容。 然而，這目前是一個“工作草案”，需要一段時間才能完成。

我們歡迎新標準，並期待我們不再需要 Flash 播放器或插件的時代，那時多媒體幾乎可以通過單一實現在任何設備上觀看。

為什麼選擇 MPEG-DASH？

讓我們研究一下 MPEG-DASH 流格式以及它在 HTML5 中使用的原因。 MPEG-DASH（DASH 是基於 HTTP 的動態自適應流的縮寫）是 MPEG 和 ISO (ISO/IEC 23009-1) 批准的獨立於供應商的國際標準。 以前的自適應流媒體技術（例如 Apple HLS、Microsoft Smooth Streaming 和 Adob​​e HDS）由供應商發布，對獨立於供應商的流媒體服務器或播放客戶端的支持有限。 依賴於供應商的情況顯然是不可取的，因此標準化機構開始了協調過程，導致 2012 年批准了 MPEG-DASH。

簡而言之，這些是 MPEG-DASH 的目標和好處：

• 減少視頻播放期間的啟動延遲以及緩沖和停頓。
• 繼續適應客戶端的帶寬情況。
• 使用基於客戶端的流邏輯來實現最高的可擴展性和靈活性。
• 使用現有且具有成本效益的基於 HTTP 的 CDN、代理和緩存。
• 通過使用 HTTP 有效地繞過 NAT 和防火牆。
• 通過來自同一文件的多個並發 DRM 方案的信令、交付和使用實現通用加密。
• 啟用簡單的拼接和（有針對性的）廣告插入。
• 有效支持“技巧模式”。
• 以及更多！

近年來，MPEG-DASH 已被集成到新的標準化工作中——例如 HTML5 MSE，它可以通過 HTML5 的video和audio標籤實現 DASH 播放，以及 HTML5 加密媒體擴展，它可以在 Web 瀏覽器中實現受 DRM 保護的播放. 此外，使用 MPEG-DASH 的 DRM 保護通過 MPEG-CENC（用於通用加密）在不同系統之間進行協調； 通過與混合廣播寬帶電視（HbbTV 1.5 和 HbbTV 2.0）集成，可以在不同的智能電視平台上播放 MPEG-DASH。

此外，業界圍繞 DASH 行業論壇及其 DASH-AVC/264 建議的努力以及前瞻性舉措（例如 DASH-HEVC/265 關於使用MPEG-DASH 中的 H.265/HEVC。

如今，MPEG-DASH 的部署越來越多，Netflix 和 Google 等服務加速了這些服務的發展，這些服務最近已切換到這一新標準。 有了這兩個主要的流量來源，MPEG-DASH 已經占到 Internet 總流量的 50%。

MSE如何運作？

現在讓我們看看 MSE 的詳細信息以及開發人員如何使用它們。 MSE 是擴展HTMLMediaElement以允許 JavaScript 為audio和video標籤動態構建媒體流的規範。 這在以前是不可能的，因為這些標籤只能訪問完整的文件（即 MP4 文件）。 這種方法也稱為漸進式流式傳輸或漸進式下載，因為媒體文件是同時下載和播放的，從而實現了偽流式傳輸。

然而，這帶來了較差的搜索能力，並且無法使視頻和音頻質量適應用戶的帶寬情況。 通過在 JavaScript 中構建媒體流作為audio和video標籤的輸入，開發人員現在可以動態地使媒體流適應用戶的上下文，從而改善流媒體體驗。

如前所述，MPEG-DASH 是 MSE 選擇的流格式。 那麼，讓我們看一下構建基於 HTML5 MSE 的視頻播放器所需的步驟：

1. 下載並解析清單文件——在 MPEG-DASH 中稱為 MPD——它描述了視頻流的詳細信息，例如視頻流的質量級別和分辨率的數量、音頻語言和字幕，以及媒體片段的名稱和基於 HTTP 的源服務器或 CDN 上的文件。
2. 估計客戶端設備上的可用帶寬，選擇合適的視頻質量以實現無緩衝流式傳輸，並以 JavaScript 下載媒體片段。
3. 將下載的媒體片段移交給 JavaScript 中的 MSE 緩衝區。
4. 通過video標籤解碼和渲染視頻，通常在硬件中。

這就是 Netflix 和 YouTube 使用的基於 HTML5 的自適應流媒體播放器的工作方式。 已經有相當成熟的解決方案可以讓開發人員和內容提供商輕鬆切換到 HTML5 中的自適應比特率流，例如 DASH-IF 開源項目 dash.js 和 Bitdash HTML5 播放器。

MPEG-DASH 內容生成也很簡單，並且得到 x264 和 MP4Box 等開源工具以及 Bitcodin 等商業編碼服務的支持

然而，MSE 的使用不限於 MPEG-DASH。 越來越多的項目（包括 hls.js）和播放器（包括 Bitdash）使用 MSE 支持 Apple 在 HTML5 中的 HLS 格式。 他們通過將 HLS 媒體段（MPEG2-TS 容器）多路復用到 HTML5 和 MPEG-DASH 所需的 ISO 基本媒體文件格式來實現這一點。

DRM 的加密媒體擴展

目前 DRM 市場正在發生重大變化，這是由於 NPAPI 插件（例如 Silverlight）即將從 Chrome 和 Firefox 中淘汰導致領先的 DRM 系統 PlayReady 下降所致。 這使幾乎所有優質內容提供商都處於困境，因為他們將不得不轉換技術並找到面向未來的解決方案。

高級流媒體出版商將無法依靠 Microsoft 的 PlayReady DRM 來保護其在 PC 和 Android 設備上的 Chrome 和 Firefox 中的內容。 他們將不得不重新評估他們的內容保護和流媒體平台戰略，並且必須找到一個面向未來的解決方案，然後很快轉換技術。

對於許多內容提供商而言，MPEG-DASH 已成為首選技術。 DASH 項目的推出速度越來越快，帶有 Widevine DRM 的 MSE 和加密媒體擴展 (EME) 看起來是最可行的替代方案。 此外，MPEG-CENC 可以支持僅具有一個受保護內容版本的單獨 DRM 系統，並且 EME 基於 MPEG-DASH 內容的 MSE。

因此，不同 DRM 系統的組合——例如，用於 Chrome 和 Android 的 Widevine Modular，用於 Internet Explorer 和 Edge 的 Microsoft PlayReady，以及用於 Firefox 的 Adob​​e Primetime——為內容的一個版本提供了額外的動力來轉向 MPEG -DASH 作為一種國際標準，因為它具有流媒體、DRM 和 CDN 的靈活性。

對 MSE 和 EME 的瀏覽器支持

經過幾年瀏覽器供應商緩慢採用 HTML5，尤其是 MSE，我們現在看到他們中的大多數都支持它。 這也適用於 EME，儘管在這種情況下，每個供應商都在使用不同的 DRM 系統，並且生態系統更加差異化。

但是，要覆蓋 99% 的用戶，我們必須有一個視頻流設置，它還支持不支持 MSE 的瀏覽器，特別是舊的瀏覽器版本和 iOS 上的 Safari。 使用基於 Flash 的播放器可以輕鬆地為舊瀏覽器提供服務，該播放器可以播放 MSE 使用的相同 MPEG-DASH 內容，如 Bitdash 播放器所示。 為了支持 iOS 設備，我們必須使用 Apple 的流格式，稱為 HLS，Apple 強制要求 HTML5。 Apple 不支持諸如 MSE 之類的開放標準，儘管它們在 OS X 上的 Safari 上受支持。

以下矩陣概述了當今跨瀏覽器和平台的 MSE 和 EME 支持狀態（由 Bitmovin 提供）：

HTML5 視頻的未來

新的媒體編解碼器正在推向市場，使視頻壓縮更加高效，這對於 4K 和 UHD 等更高質量的格式以及流式傳輸到移動設備尤其重要。 最常見的編解碼器是HEVC/h.265 ，它可能是幾年後的默認編解碼器（如果專利情況沒有搞砸的話）。 它還將利用瀏覽器內置的 MSE 進行播放，並使用 MPEG-DASH 作為流格式，這顯示了這種開放標準的靈活性。

視頻播放器的開發者只需要進行一些簡單的適配，比如在創建 SourceBuffer 時更改編解碼器的屬性； 並且，如果底層瀏覽器支持 HEVC 解碼（很可能由硬件解碼器完成），那麼您將能夠在 HTML5 中觀看您的 HEVC MPEG-DASH 流！ 我們已經成功地測試了帶有 HEVC 支持的瀏覽器，例如 Microsoft Edge。 此外，谷歌最近宣佈在其 Chromium 瀏覽器中提供支持。

儘管如此，HEVC 還不能用於絕大多數互聯網視頻資產，只有少數設備能夠對其進行解碼。 而且，當然，它不是鎮上唯一的編解碼器。 開放且免版稅的視頻編碼格式 VP9（VP8 的繼任者）旨在具有更高的編碼效率，並且已經被 Google Chrome 和 Microsoft Edge 等流行瀏覽器支持，並且該編解碼器也與 MSE 兼容。 但是，我們無法預見哪些編解碼器會進入我們的日常流媒體程序。 但無論是 VP8/9、AVC 還是 HEVC，MSE 和 MPEG-DASH 都已準備就緒！

一個即將到來的趨勢是 360 度視頻，它在 HTML5 中使用起來非常簡單。 開發人員可以利用 MSE 的自適應流式支持，只需添加 JavaScript 或 WebGL 渲染層即可在其之上獲得 360 度體驗。 最近，我討論了這個話題，以及如何使用 HTML5、JavaScript、DASH 和 WebGL 為虛擬現實構建類似 Netflix 的服務。

結論

我希望這篇文章能讓您對網絡視頻的現狀和未來有一個很好的概述。 MSE 和 EME 是朝著網絡視頻開放標準生態系統邁出的一大步，取代了 Flash 和 Silverlight 等插件。 此外，HTML5 正在成為當今多平台世界的首選平台，包括桌面、移動和智能電視環境。

除了 MPEG-DASH 等流媒體標準外，內容提供商還可以擁有跨平台和設備的統一視頻解決方案。 它們可以通過自適應流格式增強用戶體驗，從而防止緩衝、減少加載時間並為每個用戶的帶寬和設備情況提供最佳質量。