媒體串流基本概念

Derek Herman
Derek Herman
X GitHub
Jaroslav Polakovič
Jaroslav Polakovič
X GitHub

本文將介紹媒體串流的進階概念，最後應該充分瞭解各種串流用途、通訊協定和擴充功能。首先來解釋什麼是串流

媒體串流是逐段提交及播放媒體內容的方式。玩家不會載入單一檔案，如果未針對網路進行最佳化，這可能會很慢，而是會讀取資訊清單檔案，說明目標媒體如何分割成個別資料區塊。媒體區塊稍後會在執行階段以動態方式拼回，可能會出現不同的「位元率」，稍後將會瞭解。

請注意，如要在您的網站提供串流，伺服器必須支援 Range HTTP 要求標頭。如要進一步瞭解 Accept-Ranges 標頭，請參閱 <video> 和 <source> 標記一文。

串流用途

產生媒體區塊和說明串流的必要資訊清單並不算簡單，但串流可帶來一些有趣的用途，這是將 <video> 元素指向一組靜態來源檔案無法實現的功能。後續章節將說明如何在網頁中新增媒體。首先，如果您除了將多個檔案載入 <video> 元素外，還想要執行其他作業，請先瞭解串流多媒體的幾項用途。

  • 「自動調整串流」是將媒體區塊以多種位元率編碼，且「符合」用戶端目前可用頻寬的最高品質媒體區塊會傳回媒體播放器。
  • 即時播送是媒體區塊編碼並即時提供使用的位置。
  • 插入媒體是指其他媒體 (例如廣告) 插入串流中，播放器不必變更媒體來源。

串流通訊協定

網路上最常使用的串流通訊協定有兩種，分別是透過 HTTP 使用動態自動調整串流 (DASH) 和 HTTP Live Streaming (HLS)。支援這些通訊協定的玩家會擷取產生的資訊清單檔案，找出要要求的媒體區塊，然後結合至最終媒體體驗。

使用 <video> 播放串流

許多瀏覽器不會原生播放串流影片。雖然有一些原生的 HLS 播放功能，但瀏覽器通常不支援原生 DASH 串流播放。這表示只將 <video> 元素中的 <source> 指向資訊清單檔案是不夠的。

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

看似赤字實際上可能是個偽裝的力量。串流功能強大，耗用串流的應用程式則有不同的需求。

資訊清單檔案通常會描述單一媒體的多個變化版本。請考慮使用不同的位元率、多個音軌，甚至是不同格式的相同媒體。

有些應用程式則希望在緩衝區中保留大量影片，有些則可能會想從即將播出的劇集中預先擷取片頭幾秒，有些則想實作自己的邏輯來支援自動調整式串流。您希望使用特定的瀏覽器內建功能產生播放媒體串流，如此一來，即可使用這類功能。

媒體來源額外資訊

幸好，W3C 定義了名為媒體來源擴充功能 (MSE) 的程式，讓 JavaScript 產生我們的媒體串流。簡單來說，MSE 可讓開發人員將 MediaSource 物件附加至 <video> 元素，並讓它播放任何傳入至 MediaSource 例項緩衝區的媒體資料。

基本範例

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

上方的簡易範例說明幾個重點：

  • 依據 <video> 的問題，它會從網址接收媒體資料。
  • 產生的網址只是指向 MediaSource 執行個體的指標。
  • MediaSource 執行個體會建立一或多個 SourceBuffer 執行個體。
  • 接著，我們只要在緩衝區中附加二進位媒體資料，例如使用 fetch 即可。

雖然這些基本概念並不複雜，當然可以從頭開始編寫與 DASH 和 HTTP 即時串流相容的影片播放器，但多數人通常會選擇現有的成熟的開放原始碼解決方案，例如 Shaka Player、JW Player 或 Video.js。

不過，我們打造了名為 Kino 的試用版 Media PWA，說明您將如何開發自己的基本串流媒體網站，該網站只使用簡單的 <video> 元素提供離線媒體播放功能。我們目前規劃了支援架構和數位版權管理及其他功能的計畫。請不時回來查看最新情況，或建議新功能。 詳情請參閱「PWA 支援離線串流」一文。

媒體區塊格式

長久以來，DASH 和 HLS 需要將媒體區塊轉換成不同格式。不過，我們在 2016 年新增了 HLS 對標準片段化 MP4 (fMP4) 檔案的支援，這個 DASH 也支援這種格式。

使用 fMP4 容器和 H.264 轉碼器的影片區塊都支援通訊協定，且可供絕大多數玩家播放。如此一來，內容製作者只需為影片編碼一次，就能節省時間和磁碟空間。

為達成更好的品質並減少檔案大小，您可能會想要使用 VP9 等效率較高的格式，將多組媒體區塊編碼。但在進一步開始之前，您必須先瞭解如何準備網頁的媒體檔案，這部分接著就夠了。