媒體串流基本概念

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

本文將說明媒體串流的進階概念，讓您在閱讀完後，能充分瞭解各種串流用途、通訊協定和擴充功能。首先，讓我們來說明串流播送的實際意義。

媒體串流是一種逐一傳送及播放媒體內容的方式。播放器會讀取資訊清單檔案，說明如何將目標媒體分割成個別的資料區塊，而非載入單一檔案 (如果未針對網路進行最佳化，可能會很慢)。媒體區塊會在稍後的執行階段以動態方式重新拼接，可能會使用不同的比特率，這點您稍後會瞭解。

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

串流用途

產生媒體區塊和描述串流的必要資訊清單並非易事，但串流可實現一些有趣的用途，而這些用途無法只透過將 <video> 元素指向一組靜態來源檔案來達成。您將在後續章節中進一步瞭解如何在網頁中加入媒體。首先，如果您想進一步瞭解串流多媒體的應用情境，而不僅僅是將多個檔案載入 <video> 元素，請先瞭解幾個應用情境。

  • 自適應串流功能會以多種比特率編碼媒體區塊，並將符合用戶端目前可用頻寬的最高品質媒體區塊傳回媒體播放器。
  • 直播：媒體區塊會在此處進行編碼，並即時提供。
  • 插入媒體是指將廣告等其他媒體插入串流，而播放器不必變更媒體來源。

串流通訊協定

網路上最常用的兩種串流通訊協定是基於 HTTP 的動態自動調整串流 (DASH) 和HTTP 即時串流 (HLS)。支援這些通訊協定的播放器會擷取產生的資訊清單檔案，找出要要求的媒體區塊，然後將這些區塊結合成最終的媒體體驗。

使用 <video> 播放串流

許多瀏覽器不會原生播放你的串流內容。雖然瀏覽器支援某些原生 HLS 播放功能，但通常不支援原生 DASH 串流播放功能。也就是說，您可能需要將 <video> 元素中的 <source> 指向資訊清單檔案，才能順利執行這項操作。

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

看似不足的部分，其實是隱藏的優勢。串流功能十分強大，而使用串流的應用程式有不同的需求。

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

有些應用程式可能會在緩衝區中保留較大量的影片，有些應用程式可能會預先擷取即將播出的節目前幾秒的影片，有些應用程式則會實作自有的自適應串流邏輯。這時您可能會想要使用某種內建的瀏覽器功能，產生媒體串流以供播放，而這類功能剛好就存在。

媒體來源擴充功能

幸好，W3C 定義了「Media Source Extensions (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 和 HLS 的影片播放器，但大多數人通常會選擇現有的成熟開放原始碼解決方案，例如 Shaka Player、JW Player 或 Video.js 等。

不過，我們已建立名為 Kino 的媒體 PWA 示範，說明如何開發自己的基本串流媒體網站，只需使用簡單的 <video> 元素即可提供離線媒體播放功能。我們在路線圖中規劃了支援架構和數位版權管理等其他功能的計畫。因此，請不時回來查看更新內容，或提出功能要求。如要進一步瞭解這項功能，請參閱「支援離線串流的 PWA」一文。

媒體區塊格式

長久以來，DASH 和 HLS 都要求媒體區塊以不同的格式編碼。不過，HLS 在 2016 年新增了對標準片段式 MP4 (fMP4) 檔案的支援，而這也是 DASH 支援的格式。

這兩種通訊協定都支援使用 fMP4 容器和 H.264 編解碼的影片片段，而且絕大多數的播放器都能播放這類片段。這樣一來，內容製作者只需對影片進行一次編碼，就能節省時間和磁碟空間。

為獲得更高品質和更小的檔案大小，您可能會選擇使用 VP9 等更有效率的格式來編碼多組媒體區塊，不過在我們深入探討之前，您必須先瞭解如何為網路準備媒體檔案，這會在下一個章節說明。