媒體無障礙功能

Derek Herman
Derek Herman
X GitHub
Joe Medley
Joe Medley
GitHub

本文將介紹 WebVTT (網路影片文字軌) 格式、 用於描述定時文字資料，例如隱藏式輔助字幕或字幕 讓觀眾更容易理解影片

無障礙和蛋糕上的蛋糕上面需要塗鴉，請勿在 希望日後能將產品推出字幕和螢幕閱讀器 影片說明是許多使用者 觀賞您影片的唯一方式 管轄機關時

新增 <track> 標記

如要為網路影片加上字幕或螢幕閱讀器說明，請新增 <track> <video> 標記內指定標記的結果。除了字幕和螢幕閱讀器外 說明、<track> 標記也可用於字幕和章節標題。 <track> 標記也有助於搜尋引擎瞭解影片內容。 不過，這些功能不在本文的討論範圍內。

這張螢幕截圖顯示在 Android 版 Chrome 中使用軌跡元素顯示說明文字
螢幕截圖： Android 版 Chrome 中的追蹤元素

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

現在您已瞭解製作影片及便於觀賞的基本知識 您可能會想瞭解更複雜的用途。接下來 瞭解媒體架構，以及如何運用這些架構 同時提供進階功能