媒体无障碍功能

Derek Herman
Derek Herman
Joe Medley
Joe Medley

发布时间:2020 年 8 月 20 日

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

如需为网络视频添加字幕或屏幕阅读器描述,请在 <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,例如 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)。实时 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:不可见,并且可供脚本使用。

现在,您已经了解了在网页上提供视频并使其可供访问的基础知识,接下来可能会对更复杂的用例感到疑惑。了解媒体框架以及它们如何帮助您向网页添加视频,同时提供高级功能。