Media Source API

概念與用法

幾年來，網頁應用程式一直可以在沒有外掛的情況下播放影片和音訊，但其提供的基本功能僅限於播放單個完整的音軌。例如，我們無法合併/拆分 arraybuffers。直到最近，流媒體一直由 Flash 主導，像 Flash Media Server 這樣的技術使用 RTMP 協議傳輸影片流。

MSE 標準

隨著 Media Source Extensions (MSE) 的出現，這種情況正在改變。MSE 允許我們將通常提供給媒體元素的單個漸進式 src URI 替換為對 MediaSource 物件的引用。MediaSource 物件是一個容器，包含有關媒體是否可播放的就緒狀態等資訊，以及對構成整個流的各種媒體塊的多個 SourceBuffer 物件的引用。MSE 讓我們能夠更精細地控制內容的獲取量和獲取頻率，以及記憶體使用情況，例如何時需要清除緩衝區。它為構建基於其可擴充套件 API 的自適應位元率流式傳輸客戶端（例如使用 DASH 或 HLS 的客戶端）奠定了基礎。

在現代瀏覽器中建立與 MSE 相容的資源是一個耗時的過程，需要大量的計算能力和精力。需要使用外部實用工具將內容整理成合適的格式。雖然瀏覽器對 MSE 的各種媒體容器的支援參差不齊，但 H.264 影片編解碼器、AAC 音訊編解碼器和 MP4 容器格式的用法是一個常見的基準。MSE 還提供了一個 API，用於在執行時檢測容器和編解碼器的支援情況。

如果您不需要對影片質量隨時間的變化、內容獲取速率或記憶體清除速率進行顯式控制，那麼 <video> 和 <source> 標籤可能是一個簡單且足夠的解決方案。

DASH

Dynamic Adaptive Streaming over HTTP (DASH) 是一種用於指定如何獲取自適應內容的協議。它實際上是構建自適應位元率流式傳輸客戶端的 MSE 之上的一個層。雖然還有其他協議可用（例如 HTTP Live Streaming (HLS)），但 DASH 在平臺支援方面最為廣泛。

DASH 將大量邏輯從網路協議移到了客戶端應用程式邏輯中，使用更簡單的 HTTP 協議來獲取檔案。事實上，可以使用一個簡單的靜態檔案伺服器來支援 DASH，這對於 CDN 也非常有利。這與以前需要為專有的非標準客戶端/伺服器協議實現昂貴許可證的流媒體解決方案形成了鮮明對比。

DASH 的兩個最常見用例是觀看“點播”或“直播”內容。點播允許開發人員花時間將資源轉碼成多種解析度和質量。

直播內容由於其轉碼和廣播過程可能會引入延遲，因此 DASH 不適用於即時通訊，例如 WebRTC。但是，它可以支援比 WebRTC 多得多的客戶端連線。

有許多可用的免費開源工具可用於轉碼內容、為 DASH 準備內容、DASH 檔案伺服器以及用 JavaScript 編寫的 DASH 客戶端庫。DASH Adaptive Streaming for HTML video 文章提供了一個如何將 DASH 與 MSE 結合使用的示例。

在 Worker 中可用

從 Chrome 108 開始，MSE 功能在專用的 web workers 中可用，這使得在操作 MediaSource 和 SourceBuffer 時可以獲得更高的效能。要回放媒體，使用 MediaSource.handle 屬性來獲取 MediaSourceHandle 物件的引用，該物件是 MediaSource 的代理，可以將其傳回主執行緒並透過媒體元素的 HTMLMediaElement.srcObject 屬性進行附加。

請參閱 Matt Wolenetz 的 MSE-in-Workers Demo 以獲取一個即時示例。

介面

MediaSource

表示一個將透過 HTMLMediaElement 物件播放的媒體源。

MediaSourceHandle

一個 MediaSource 的代理，可以從專用 Worker 傳回主執行緒，並透過媒體元素的 HTMLMediaElement.srcObject 屬性進行附加。

SourceBuffer

表示要透過 MediaSource 物件傳遞到 HTMLMediaElement 的媒體塊。

SourceBufferList

一個簡單的容器列表，用於存放多個 SourceBuffer 物件。

VideoPlaybackQuality

包含有關 <video> 元素正在播放的影片質量的資訊，例如丟幀或損壞幀的數量。由 HTMLVideoElement.getVideoPlaybackQuality() 方法返回。

其他介面的擴充套件

HTMLMediaElement.buffered

返回一個 TimeRanges 物件，該物件指示瀏覽器在訪問 buffered 屬性時已緩衝的媒體源範圍（如果有）。

HTMLMediaElement.seekable

返回一個 TimeRanges 物件，該物件包含使用者可以跳轉到的時間範圍（如果有）。

HTMLMediaElement.srcObject

表示將在當前 HTMLMediaElement 中播放的媒體資源或已播放的媒體資源的提供者物件，如果未分配則為 null。

HTMLVideoElement.getVideoPlaybackQuality()

返回當前播放影片的 VideoPlaybackQuality 物件。

AudioTrack.sourceBuffer, VideoTrack.sourceBuffer, TextTrack.sourceBuffer

返回建立該軌道（相關軌道）的 SourceBuffer。

規範

另見

• 轉碼 Media Source Extensions™ 資源
• 使用 MSE 建立一個基本的流媒體服務（待定）
• 使用 MPEG DASH 建立一個流媒體應用程式（待定）
• <audio> 和 <video> 元素。
• HTMLMediaElement, HTMLVideoElement, HTMLAudioElement。