發布日期:2020 年 8 月 20 日
許多使用者只能透過輔助字幕和螢幕閱讀器說明來觀看影片,在某些司法管轄區,甚至還必須遵守法律或法規規定。WebVTT (網路影片文字軌) 格式是用來描述計時文字資料 (例如隱藏式輔助字幕或字幕),讓影片更易於存取。
新增 <track>
標記
如要在網路影片中加入字幕或螢幕閱讀器說明,請在 <video>
標記中加入 <track>
標記。除了字幕和螢幕閱讀器說明外,<track>
標記也可以用於字幕和章節標題。
<track>
標記與 <source>
元素相似,兩者都有 src
屬性,可指向參照的內容。<track>
代碼會指向 WebVTT 檔案。label
屬性會指定如何在介面中識別特定曲目。
如要提供多種語言的音軌,請為每個提供的 WebVTT 檔案新增個別的 <track>
標記,並使用 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
:不可見,但可能會由指令碼使用。
現在您已瞭解在網頁上提供影片的基本知識,接著您可能會想認識較複雜的用途。瞭解媒體架構,以及如何透過這些架構在網頁中加入影片,同時提供進階功能。