本節將說明如何使用 <video>
和 <source>
標記在網頁中嵌入媒體檔案、為聽障人士在影片中加上字幕,以及使用媒體架構的一些一般概念。此外,您將學習如何使用預先載入功能加快播放速度,我們也會探討我們如何利用名為 Kino 的離線自動調整串流功能,建構新版試用版 PWA。
本節假設您有一個已可嵌入網頁的影片檔案。從相機下載的 .mov
檔案無法運作。如果全部都已備妥,請參閱「準備網頁版媒體檔案」一節,然後再回來查看。
本節涵蓋這些主題。
- 您可以參閱 <video> 和 <source> 標記,瞭解將媒體檔案嵌入網頁的方式。
- 我們將在媒體無障礙功能中,為聽障人士專用的媒體檔案新增字幕。
- 在「媒體架構」中,您將瞭解使用 Shaka Player、JW Player 和 Video.js 等媒體架構的基本概念。
- 在預先載入音訊和視訊的情況下快速播放時,可藉由主動預先載入資源,加快媒體播放速度。
- 我們將在具備離線串流功能的 PWA 中建構新版試用版 PWA,該 PWA 能否在不使用架構的情況下自動調整串流和離線播放。此外,您還能使用原始碼玩遊戲。
本節中有許多內容可以講解,請先學習如何使用 <video> 和 <source> 標記。