本文將介紹媒體串流的進階概念,最後應該充分瞭解各種串流用途、通訊協定和擴充功能。首先來解釋什麼是串流
媒體串流是逐段提交及播放媒體內容的方式。玩家不會載入單一檔案,如果未針對網路進行最佳化,這可能會很慢,而是會讀取資訊清單檔案,說明目標媒體如何分割成個別資料區塊。媒體區塊稍後會在執行階段以動態方式拼回,可能會出現不同的「位元率」,稍後將會瞭解。
請注意,如要在您的網站提供串流,伺服器必須支援 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
等效率較高的格式,將多組媒體區塊編碼。但在進一步開始之前,您必須先瞭解如何準備網頁的媒體檔案,這部分接著就夠了。