媒體串流基本概念

Derek Herman
Derek Herman
Jaroslav Polakovič
Jaroslav Polakovič

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

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

請注意,如要在網站上提供串流功能,伺服器必須支援 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 PlayerJW PlayerVideo.js 等。

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

媒體區塊格式

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

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

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