本文將介紹 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
:不會顯示,且可能由指令碼使用。
現在您已瞭解製作影片及便於觀賞的基本知識 您可能會想瞭解更複雜的用途。接下來 瞭解媒體架構,以及如何運用這些架構 同時提供進階功能