本文將介紹 WebVTT (網路影片文字軌) 格式、 用於描述定時文字資料，例如隱藏式輔助字幕或字幕 讓觀眾更容易理解影片
無障礙和蛋糕上的蛋糕上面需要塗鴉，請勿在 希望日後能將產品推出字幕和螢幕閱讀器 影片說明是許多使用者 觀賞您影片的唯一方式 管轄機關時
新增 <track> 標記
如要為網路影片加上字幕或螢幕閱讀器說明，請新增 <track>
<video> 標記內指定標記的結果。除了字幕和螢幕閱讀器外
說明、<track> 標記也可用於字幕和章節標題。
<track> 標記也有助於搜尋引擎瞭解影片內容。
不過，這些功能不在本文的討論範圍內。
<track> 標記與兩者都具備 src 的 <source> 元素類似
屬性。對於 <track> 標記，它指向
WebVTT 檔案。label 屬性會指定特定音軌的呈現方式
介面與介面元素
如要為多種語言提供字幕軌，請為每個語言新增個別的 <track> 標記
您提供的 WebVTT 檔案，並使用 srclang 指定語言
屬性。
下方顯示含有兩個 <track> 標記的 <video> 標記範例。另外，
前往 Glitch 查看 (資料來源)。
新增 <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>
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.
...
追蹤檔案中的每個項目都稱為提示。每個提示都有開始時間
結束時間以箭頭分隔，下面一行是提示文字。提示
您可以選擇在以下範例中使用 railroad 和 manuscript 等 ID。
提示之間以空白行分隔。
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 代表零)。以下網站提供優質的 WebVTT 驗證工具：
Live 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：不會顯示，且可能由指令碼使用。
現在您已瞭解製作影片及便於觀賞的基本知識 您可能會想瞭解更複雜的用途。接下來 瞭解媒體架構，以及如何運用這些架構 同時提供進階功能