本文將介紹更進階的媒體概念 且最後應該對 串流用途、通訊協定和擴充功能先從 我將說明什麼是串流
媒體串流是一種提交及播放媒體內容的方式 片段比起載入單一檔案，如果不載入單一檔案，處理速度可能會較慢 因此，播放器會讀取資訊清單檔案，說明目標媒體如何 分為多個獨立資料區塊媒體區塊稍後會動態拼接 在執行階段一併傳回 — 可能會有不同的位元率，這可能是 我們稍後將在課程 深入介紹這些原則及擬定過程
請注意，如要在網站伺服器上提供串流，
必須支援 Range HTTP 要求標頭。進一步瞭解Accept-Ranges
<video> 中的標題和 <source>標記一文。
串流用途
產生媒體區塊和說明串流的必要資訊清單並非
但串流功能也帶來了一些有趣的用途
無法單單指向 <video> 元素就能達成。
一組靜態來源檔案您將進一步瞭解如何
在下一節中在網頁上新增媒體。首先，你應該瞭解
串流多媒體的幾個用途
在 <video> 元素中載入多個檔案。
- 自動調整串流是將媒體區塊編碼成多個檔案的位置 和用戶端的適用最大高品質媒體區塊 將目前的可用頻寬傳回媒體播放器
- 直播是將媒體區塊編碼並提供給媒體區塊的位置 即時。
- 插入媒體是系統置入其他媒體 (例如廣告) 的位置 則不必變更媒體來源
串流通訊協定
網路上最常用的兩種串流通訊協定是動態 透過 HTTP 自動調整串流 (DASH) 和 HTTP 直播 (HLS)。 支援這些通訊協定的播放器會擷取產生的資訊清單檔案 找出該請求的媒體區塊，然後合併到最後 媒體體驗
使用 <video> 播放串流
許多瀏覽器不會原生播放串流影片。儘管這部分
原生 HLS 播放，但瀏覽器通常不支援原生 DASH。
隨時串流播放。這通常意味著將 <source> 指向本身是不夠的
新增至資訊清單檔案的 <video> 元素中。
<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 的試用版 Media PWA
建議您自行開發基本的串流媒體網站
只需使用簡單的 <video> 元素，即可離線媒體播放。有方案
我們的藍圖，支援架構和數位版權管理等
接著介紹網際網路通訊層
包括兩項主要的安全防護功能請不時回來查看是否有更新，或建議新功能。
詳情請參閱「PWA 支援離線串流」一文。
媒體區塊格式
長久以來，DASH 和 HLS 需要將媒體區塊編碼成不同的 格式。不過，在 2016 年，系統將支援標準切割 MP4 (fMP4) 檔案 已新增至 HLS，而 DASH 也支援這種格式。
系統支援使用 fMP4 容器和 H.264 轉碼器的影片區塊
可供絕大多數玩家暢玩這樣一來，
內容製作者只需為影片編碼一次，因此可以節省時間
和磁碟空間
如要提升畫質及降低檔案大小，建議您
使用 VP9 等效率更高的格式來編碼多組媒體區塊。
但在繼續下一步之前，您必須先瞭解如何
準備網頁版媒體檔案，這才是後續行動。