媒體無障礙功能

Derek Herman
Derek Herman
Joe Medley
Joe Medley

發布日期:2020 年 8 月 20 日

許多使用者只能透過輔助字幕和螢幕閱讀器說明來觀看影片,在某些司法管轄區,甚至還必須遵守法律或法規規定。WebVTT (Web Video Text Tracks) 格式可用於描述時間軸文字資料 (例如隱藏式字幕或字幕),讓影片更易於存取。

新增 <track> 標記

如要在網路影片中加入字幕或螢幕閱讀器說明,請在 <video> 標記中加入 <track> 標記。除了字幕和螢幕閱讀器說明之外,<track> 標記也可用於字幕和章節標題。

螢幕截圖:顯示在 Android 版 Chrome 中使用 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,例如 railroadmanuscript。提示之間以空白行分隔。

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 設定提示樣式。您可能想使用灰色線性漸層做為背景,並為所有字幕和所有粗體文字設定 papayawhip 的前景色彩,並將 peachpuff 設為字幕的顏色。

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:不會顯示,且可能由指令碼使用。

現在您已瞭解在網頁上提供影片的基本知識,接著您可能會想認識較複雜的用途。瞭解媒體架構,以及如何透過這些架構在網頁中加入影片,同時提供進階功能。