本文將介紹媒體串流的進階概念，最後應該充分瞭解各種串流用途、通訊協定和擴充功能。首先，讓我們來瞭解串流的實際意義。
媒體串流是一種逐一傳送及播放媒體內容的方式。播放器會讀取資訊清單檔案，說明如何將目標媒體分割成個別的資料區塊，而非載入單一檔案 (如果未針對網路進行最佳化，可能會很慢)。媒體區塊稍後會在執行階段以動態方式拼回，可能會出現不同的「位元率」，稍後將會瞭解。
請注意，如要在網站上提供串流功能，伺服器必須支援 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 需要將媒體區塊轉換成不同格式。不過，我們在 2016 年新增了 HLS 對標準片段化 MP4 (fMP4) 檔案的支援，這個 DASH 也支援這種格式。
這兩種通訊協定都支援使用 fMP4 容器和 H.264 編解碼的影片片段，而且絕大多數的播放器都能播放這類片段。這樣一來，內容製作者只需對影片進行一次編碼，就能節省時間和磁碟空間。
為達成更好的品質並減少檔案大小，您可能會想要使用 VP9 等效率較高的格式，將多組媒體區塊編碼。但在進一步開始之前，您必須先瞭解如何準備網頁的媒體檔案，這部分再說再多了。