媒体无障碍功能

Derek Herman
Derek Herman
X GitHub
Joe Medley
Joe Medley
GitHub

发布时间：2020 年 8 月 20 日

图片说明和屏幕阅读器说明是许多用户唯一能够 在某些司法管辖区， 法律法规。WebVTT（网络视频文本轨道）格式用于描述 定时文本数据（如字幕） 可访问性。

添加 <track> 标记

如需为网络视频添加字幕或屏幕阅读器说明，请添加<track> 放在 <video> 标记中。除字幕和屏幕阅读器之外 <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。每个插入点都有一个开始时间 结束时间（以箭头分隔），后跟提示文字。提示中 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：不可见，并且可供脚本使用。

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