媒体无障碍功能

Derek Herman
Derek Herman
X GitHub
Joe Medley
Joe Medley
GitHub

在本文中，您将了解 WebVTT（网络视频文字轨道）格式， 用于描述定时文本数据，例如字幕 让您的观众更方便地观看视频

无障碍功能不同于锦上添花，你绝不会在电脑上放置任何东西 希望以后能介绍这些内容字幕和屏幕阅读器 说明是您观看视频的唯一途径 则甚至需要遵守法律或法规。

添加 <track> 标记

如需为网络视频添加字幕或屏幕阅读器说明，请添加<track> 放在 <video> 标记中。除字幕和屏幕阅读器之外 <track> 标记也可以用于字幕和章节标题。 <track> 标记还可以帮助搜索引擎了解视频中的内容。 不过，这些功能不在本文的讨论范围内。

<ph type="x-smartling-placeholder">
</ph> 显示 Android 版 Chrome 中使用跟踪元素显示字幕的屏幕截图
显示使用 Android 版 Chrome 中的跟踪元素

<track> 标记与 <source> 元素类似，因为它们都具有 src 属性。对于 <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 文件。该文件是 文本文件，其中包含一系列 cues。每个插入点都是要显示的文本块 以及显示时间范围。

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。每个插入点都有一个开始时间 结束时间（以箭头分隔），下一行中的提示文字。提示可以 还可以选择包含下例中的 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 验证器： 直播 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：不可见，并且可供脚本使用。

现在，你已经了解了关于制作视频可供观看和观看的基础知识 您可能需要考虑更复杂的用例。接下来，您将 了解媒体框架，以及它们如何帮助您添加 同时提供高级功能