媒体无障碍功能

Derek Herman
Derek Herman
X GitHub
Joe Medley
Joe Medley
GitHub

发布时间：2020 年 8 月 20 日

字幕和屏幕阅读器说明是许多用户观看视频的唯一方式，在某些司法管辖区，甚至是法律或法规要求提供这些内容。WebVTT（Web 视频文本轨）格式用于描述同步文本数据（例如字幕），以便用户更轻松地观看您的视频。

添加 <track> 标记

如需为网络视频添加字幕或屏幕阅读器描述，请在 <video> 标记中添加 <track> 标记。除了字幕和屏幕阅读器描述之外，<track> 标记还可用于字幕和章节标题。

展示在 Android 版 Chrome 中使用 track 元素后字幕显示情况的屏幕截图。

<track> 标记类似于 <source> 元素，因为它们都有一个指向所引用内容的 src 属性。对于 <track> 标记，它指向 WebVTT 文件。label 属性指定如何在界面中识别特定轨道。

如需提供多种语言的轨道，请为您提供的每个 WebVTT 文件添加单独的 <track> 标记，并使用 srclang 属性指明语言。

请查看以下包含两个 <track> 标记的 <video> 标记示例。 将 <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.

...

轨道文件中的每个项都是一个提示。每个 cue 都有一个开始时间和结束时间（以箭头分隔），后跟 cue 文本。提示也可以包含 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）。实时 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：不可见，并且可能会被脚本使用。

现在，您已经了解了在网页上提供并访问视频的基本方法，您或许有想要了解更复杂的用例。了解媒体框架以及它们如何帮助您向网页添加视频，同时提供高级功能。