發布日期：2020 年 8 月 20 日
字幕和螢幕閱讀器說明是多數使用者 經驗 在某些管轄區中 法律或法規。WebVTT (Web Video Text Tracks) 格式可用於描述時間軸文字資料 (例如隱藏式字幕或字幕)，讓影片更易於存取。
新增 <track> 標記
如要在網路影片中加入字幕或螢幕閱讀器說明，請在 <video> 標記中加入 <track> 標記。除了字幕和螢幕閱讀器說明之外，<track> 標記也可用於字幕和章節標題。
<track> 標記與兩者都具備 src 的 <source> 元素類似
屬性。<track> 代碼會指向 WebVTT 檔案。label 屬性會指定特定軌跡的
介面與介面元素
如要為多種語言提供字幕軌，請為每個語言新增個別的 <track> 標記
您提供的 WebVTT 檔案，並使用 srclang 指定語言
屬性。
請參考以下範例，其中 <video> 標記包含兩個 <track> 標記。新增 <track> 元素做為 <video> 元素的子項。
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
你也可以參考這份範例 前往 Glitch 查看。
WebVTT 檔案結構
這是示範用的 WebVTT 檔案。這個文字檔包含 一組提示每個提示都是要顯示的文字區塊 顯示的時間及顯示時間範圍
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
軌道檔案中的每個項目都是提示。每個提示都有開始時間
結束時間，以箭頭分隔，後面接著提示文字。提示也可以有 ID，例如 railroad 和 manuscript。提示之間以空白行分隔。
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
提示時間採用 hours:minutes:seconds.milliseconds 格式。剖析設有嚴格格式，
換句話說，如果有小時、分鐘、秒鐘，數字都必須填零
必須有兩位數 (00 代表零)，而毫秒數則必須有三位數
數字 (000 代表零)。Live WebVTT 驗證工具提供優異的 WebVTT 驗證工具，可檢查時間格式錯誤和時間不連續等問題。
你可以手動建立 VTT 檔案，但也有許多服務可為你建立這些檔案。
如先前範例所示，WebVTT 格式相當簡單。只要加入文字資料和時間。
不過，如果您想讓字幕以左對齊或右對齊的方式顯示在不同位置，該怎麼做呢？是否能將字幕與目前的講者對齊
或避開相機內文字WebVTT 會定義適合的設定
等更多內容
.vtt 檔案。請注意，
設定間隔
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
另一項實用功能是使用 CSS 設定提示樣式。也許你需要
使用灰色線性漸層做為背景，前景色彩為
所有說明文字和所有粗體文字顏色均為 peachpuff papayawhip。
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
如想進一步瞭解個別的樣式和標記相關資訊 提示，WebVTT 規格是提供進階範例的良好來源。
文字軌類型
您是否注意到 <track> 元素的 kind 屬性？如果有
指出特定文字軌與影片的關聯。kind 屬性的可能值如下：
captions：適用於任何音訊的轉錄稿和可能的翻譯內容所產生的隱藏式輔助字幕。適合聽障人士使用，適用於影片 設為靜音。subtitles：就字幕而言，也就是將語音和文字翻譯成 與影片主要語言不同的語言descriptions：用於說明影片內容的視覺部分。適合視障人士使用。chapters：適合在使用者 影片。metadata：不可見，但可能會由指令碼使用。
現在您已瞭解製作影片及便於觀看的基本概念了 您可能會想瞭解更複雜的用途。瞭解媒體架構，以及如何透過這些架構在網頁中加入影片，同時提供進階功能。