在本文中，您將瞭解媒體串流的更進階概念，最後應能充分瞭解各種串流用途、通訊協定和擴充功能。首先來解釋何謂串流
媒體串流是一種傳送及播放個別媒體內容的方式。玩家不會載入單一檔案，如果沒有針對網路進行最佳化，速度可能會比較慢，而是讀取資訊清單檔案，說明目標媒體如何分割成個別的資料區塊。之後，媒體區塊會在執行階段動態拼接，可能採用不同的位元率，稍後會說明。
請注意，如要在網站上提供串流，伺服器必須支援 Range HTTP 要求標頭。如要進一步瞭解 Accept-Ranges 標頭，請參閱「<video> 和 <source> 標記」一文。
串流用途
產生媒體區塊和描述串流的必要資訊清單並非直接簡單，但串流可解鎖單純將 <video> 元素指向一組靜態來源檔案無法實現的有趣用途。如要進一步瞭解如何在網頁中加入媒體，請參閱下一節。首先，如果想進一步處理串流多媒體內容的使用方法，除了將多個檔案載入到 <video> 元素之外，也必須先瞭解幾項串流多媒體用途。
- 自動調整串流是指以多種位元率編碼媒體區塊的位置，並且會將用戶端目前可用頻寬「符合」的最高品質媒體區塊傳回媒體播放器。
- 「現場直播」是指對媒體區塊進行編碼並即時提供的位置。
- 插入媒體是指其他媒體 (例如廣告) 插入串流的位置，播放器不必變更媒體來源。
串流通訊協定
網路上最常使用的串流通訊協定是 Dynamic Adaptive Streaming over HTTP (DASH) 和 HTTP Live Streaming (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 這類更有效率的格式，將多種媒體區塊編碼。但在開始深入之前，您必須先瞭解如何準備網頁的媒體檔案，下一步該怎麼做。