使用 WebVTT 提升视频可访问性

“网络的力量在于它的普遍性。无论残疾与否，每个人都能访问网络，这是网络的一个基本方面。”
– Tim Berners-Lee

可访问性是 Web 开发的重要组成部分，随着视频内容的日益普及，字幕内容的需求也在不断增长。 WebVTT 是一种有助于字幕内容的技术，它是一种字幕格式，可以轻松地与现有的 Web API 集成。

这就是我们将在本文中探讨的内容。当然，WebVTT 在其最基本的形式下就是字幕，但有一些方法可以对其进行实施，从而使视频（以及字幕内容本身）对用户更具可访问性。

认识 WebVTT 格式

首先：WebVTT 是一种文件类型，其中包含文本“WebVTT”以及带有时间戳的字幕行。这是一个示例

WEBVTT

00:00:00.000 --> 00:00:03.000
- [Birds chirping]
- It's a beautiful day!

00:00:04.000 --> 00:00:07.000
- [Creek trickling]
- It is indeed!

00:00:08.000 --> 00:00:10.000
- Hello there!

有点奇怪，但很有道理，对吧？如您所见，第一行是“WEBVTT”，后面跟着第 3 行的时间范围（在本例中为 0 到 3 秒）。时间范围是必需的。否则，WEBVTT 文件根本无法工作，甚至不会显示或记录错误以告知您。最后，时间范围下方的每一行都表示该范围内包含的字幕。

请注意，您可以在单个时间范围内包含多个字幕。可以使用连字符表示一行的开始，尽管这不是必需的，更多的是一种样式。

时间范围可以采用两种格式之一：hh:mm:ss.tt 或 mm:ss.tt。每个部分都遵循某些规则

小时 (hh)：至少两位数字
分钟 (mm)：介于 00 和 59（含）之间
秒 (ss)：介于 00 和 59（含）之间
毫秒 (tt)：介于 000 和 999（含）之间

这起初可能看起来令人生畏。您可能想知道如何才能手动键入和调整所有这些内容。幸运的是，有一些工具可以简化此过程。例如，YouTube 可以使用语音识别自动为您添加视频字幕，还可以让您将字幕下载为 VTT 文件！但这还不是全部。 WebVTT 也可以与 YouTube 一起使用，方法是将您的 VTT 文件上传到您的 YouTube 视频。

创建此文件后，我们可以将其嵌入到 HTML5 视频元素中。

<video autoplay="autoplay" controls="controls" width="300" height="150">
  <source src="your_video.mp4" type="video/mp4">
  <track default="" kind="captions" srclang="en" label="English" src="your_caption_file.vtt">
</video>

标签有点像一个脚本，它与视频“一起播放”。我们可以在同一个视频元素中使用多个轨道。 default 属性指示该轨道将自动启用。

趁此机会，让我们来了解一下所有属性

srclang 指示轨道的语言。
kind 表示轨道的类型，共有五种类型
- subtitles 通常是视频不同部分的翻译和描述。
- descriptions 帮助视障用户了解视频中发生的事情。
- captions 为听障用户提供音频的替代方案。
- metadata 是脚本使用的轨道，用户无法看到。
- chapters 帮助导航视频内容。
label 是文本轨道的标题，显示在字幕轨道中
src 是轨道的源文件。它不能来自跨域源，除非指定了 crossorigin。

虽然 WebVTT 专为视频设计，但您仍然可以通过将音频文件放在 <video> 元素中来将其与音频一起使用。

深入了解 WebVTT 文件的结构

MDN 提供了优秀的文档，并概述了 WebVTT 文件的主体结构，该结构最多包含六个组件。以下是 MDN 的分解方法

可选的字节顺序标记 (BOM)

字符串“WEBVTT”

WEBVTT 右侧的可选文本标题。

WEBVTT 后面必须至少有一个空格。

您可以使用它向文件添加描述。

您可以在文本标题中使用任何内容，但换行符或字符串“-->”除外。

空行，相当于两个连续的换行符。

零个或多个提示或注释。

零个或多个空行。

注意：BOM 是一个 Unicode 字符，指示文本文件的 Unicode 编码。

粗体、斜体和下划线 — 哦，我的天哪！

我们绝对可以在 WebVTT 文件中使用一些内联 HTML 格式！这些都是大家熟悉的：<b>、<i> 和 <u>。您使用它们的方式与在 HTML 中完全相同。

WEBVTT

00:00:00.000 --> 00:00:03.000 align:start
This is <b>bold text</b>

00:00:03.000 --> 00:00:06.000 align:middle
This is <i>italic text</i>

00:00:06.000 --> 00:00:09.000 vertical:rl align:middle
This is <u>underlined  text</u>

提示设置

提示设置是用于控制字幕位置的可选文本字符串。这有点像在 CSS 中定位元素，例如能够在视频上放置字幕。

例如，我们可以将字幕放置在提示时间线的右侧，控制字幕是水平显示还是垂直显示，以及定义字幕的对齐方式和垂直位置。

以下是可供我们使用的设置。

设置 1：行

line 控制字幕在 y 轴上的位置。如果指定了 vertical（我们将在后面讨论），那么 line 将指示字幕将在 x 轴上的哪个位置显示。

在指定 line 值时，整数和百分比都是完全可以接受的单位。在使用整数的情况下，每行的距离将等于第一行的高度（从水平角度）。因此，例如，假设字幕第一行的高度等于 50px，指定的 line 值为 2，并且字幕的方向为水平。这意味着字幕将从顶部向下定位 100px（50px 乘以 2），直到等于视频边界的坐标。如果我们使用负整数，它将随着值减小而从底部向上移动（或者，在指定了 vertical:lr 的情况下，我们将从右到左移动，反之亦然）。在这里要小心，因为字幕可能会被放置到屏幕外，并且在不同浏览器中的位置不一致。能力越大，责任越大！

在百分比的情况下，值必须介于 0-100%（含）（抱歉，这里没有 200% 的超大值）。较高的值将使字幕从上到下移动，除非指定了 vertical:lr 或 vertical:rl，在这种情况下，字幕将相应地沿 x 轴移动。

随着值增加，字幕将出现在视频边界下方。随着值减小（包括负值），字幕将出现在上方。

没有示例很难想象，对吧？以下是将其转换为代码的方式

00:00:00.000 --> 00:00:03.000 line:50%
This caption should be positioned horizontally in the approximate center of the screen.

00:00:03.000 --> 00:00:06.000 vertical:lr line:50%
This caption should be positioned vertically in the approximate center of the screen.

00:00:06.000 --> 00:00:09.000 vertical:rl line:-1
This caption should be positioned vertically along the left side of the video.

00:00:09.000 --> 00:00:12.000 line:0
The caption should be positioned horizontally at the top of the screen.

设置 2：垂直

vertical 指示字幕将垂直显示并沿 line 设置指定的方向移动。有些语言不是从左到右显示，而是需要从上到下显示。

  00:00:00.000 --> 00:00:03.000 vertical:rl
This caption should be vertical.

00:00:00.000 --> 00:00:03.000 vertical:lr
This caption should be vertical.

设置 3：位置

position 指定字幕将在 x 轴上的哪个位置显示。如果指定了 vertical，则 position 将指示字幕将在 y 轴上的哪个位置显示。它必须是介于 0% 和 100%（含）之间的整数。

00:00:00.000 --> 00:00:03.000 vertical:rl position:100%
This caption will be vertical and toward the bottom.

00:00:03.000 --> 00:00:06.000 vertical:rl position:0%
This caption will be vertical and toward the top.

在这一点上，你可能会注意到line和position类似于CSS flexbox属性中的align-items和justify-content，而vertical的行为则非常像flex-direction。记住WebVTT方向的一个技巧是，line指定了垂直于文本流的方向，而position指定了平行于文本流的方向。这就是为什么如果我们指定了vertical，line会突然沿着水平轴移动，而position会沿着垂直轴移动。

设置 4：尺寸

size指定字幕的宽度。如果指定了vertical，则它将设置字幕的高度。与其他设置一样，它必须是0%到100%（包括）之间的整数。

00:00:00.000 --> 00:00:03.000 vertical:rl size:50%
This caption will fill half the screen vertically.

00:00:03.000 --> 00:00:06.000 position:0%
This caption will fill the entire screen horizontally.

设置 5：对齐

align指定文本在水平方向上的显示位置。如果指定了vertical，则它将控制垂直方向的对齐方式。

我们拥有的值有：start、middle、end、left和right。如果没有指定vertical，则对齐方式完全符合其字面意思。如果指定了vertical，则它们实际上变成了top、middle（垂直）和bottom。使用start和end而不是分别使用left和right，是一种更灵活的方式，可以让对齐方式基于unicode-bidi CSS属性的plaintext值。

请注意，align不受vertical:lr或vertical:rl的影响。

WEBVTT

00:00:00.000 --> 00:00:03.000 align:start
This caption will be on the left side of the screen.

00:00:03.000 --> 00:00:06.000 align:middle
This caption will be horizontally in the middle of the screen.

00:00:06.000 --> 00:00:09.000 vertical:rl align:middle
This caption will be vertically in the middle of the screen.

00:00:09.000 --> 00:00:12.000 vertical:rl align:end
This caption will be vertically at the bottom right of the screen regardless of vertical:lr or vertical:rl orientation.

00:00:12.000 --> 00:00:15.000 vertical:lr align:end
This caption will be vertically at the bottom of the screen, regardless of the vertical:lr or vertical:rl orientation.

00:00:12.000 --> 00:00:15.000 align:left
This caption will appear on the left side of the screen.

00:00:12.000 --> 00:00:15.000 align:right
This caption will appear on the right side of the screen.

WebVTT 注释

WebVTT 注释是只有在读取文件源代码时才能看到的文本字符串，就像我们在HTML、CSS、JavaScript和任何其他语言中对注释的理解一样。注释可以包含换行符，但不能包含空行（本质上是两个换行符）。

WEBVTT

00:00:00.000 --> 00:00:03.000
- [Birds chirping]
- It's a beautiful day!

NOTE This is a comment. It will not be visible to anyone viewing the caption.

00:00:04.000 --> 00:00:07.000
- [Creek trickling]
- It is indeed!

00:00:08.000 --> 00:00:10.000
- Hello there!

当字幕文件被解析和渲染时，上面突出显示的行将完全隐藏在用户面前。注释也可以是多行的。

有三个非常重要的字符/字符串需要注意，它们不能用于注释：<、&和-->。作为替代，您可以使用转义字符。

不允许使用	替代方案
`NOTE PB&J`	`NOTE PB&J`
`NOTE 5 < 7`	`NOTE 5 < 7`
`NOTE puppy --> dog`	`NOTE puppy --> do`

一些其他有趣的WebVTT功能

我们将快速了解一些非常巧妙的方法，我们可以用它们来自定义和控制字幕，但这些方法至少在撰写本文时缺乏一致的浏览器支持。

是的，我们可以设置字幕样式！

事实上，WebVTT 字幕可以设置样式。例如，要将字幕的背景设置为红色，请在::cue伪元素上设置background属性

video::cue {
  background: red;
}

还记得我们如何在WebVTT文件中使用一些内联HTML格式吗？好吧，我们也可以选择它们。例如，要选择并设置斜体(<i>)元素

video::cue(i) {
  color: yellow;
}

事实证明，WebVTT文件支持样式块，这与HTML文件的方式非常相似。

WEBVTT

STYLE
::cue {
  color: blue;
  font-family: "Source Sans Pro", sans-serif;
}

元素也可以通过其提示标识符进行访问。请注意，提示标识符使用与HTML相同的转义机制。

WEBVTT

STYLE
::cue(#middle\ cue\ identifier) {
  text-decoration: underline;
}
::cue(#cue\ identifier\ \33) {
  font-weight: bold;
  color: red;
}

first cue identifier
00:00:00.000 --> 00:00:02.000
Hello, world!

middle cue identifier
00:00:02.000 --> 00:00:04.000
This cue identifier will have an underline!

cue identifier 3
00:00:04.000 --> 00:00:06.000
This one won't be affected, just like the first one!

不同类型的标签

许多标签可用于格式化字幕。有一个需要注意的地方。这些标签不能用于元素中，其中kind属性为chapters。以下是一些您可以使用的格式化标签。

class 标签

我们可以使用class标签在WebVTT标记中定义类，这些类可以使用CSS进行选择。假设我们有一个类.yellowish，它使文本呈黄色。我们可以在字幕中使用标签。我们可以通过这种方式控制很多样式，比如字体、字体颜色和背景颜色。

/* Our CSS file */
.yellowish {
  color: yellow;
}
.redcolor {
  color: red;
}

WEBVTT

00:00:00.000 --> 00:00:03.000
This text should be yellow. This text will be the default color.

00:00:03.000 --> 00:00:06.000
This text should be red. This text will be the default color.

时间戳标签

如果你想让字幕在特定时间出现，那么你需要使用时间戳标签。它们就像对字幕进行微调，使其精确到时间的某个时刻。标签的时间必须在字幕给定的时间范围内，并且每个时间戳标签必须晚于前一个。

WEBVTT

00:00:00.000 --> 00:00:07.000
This <00:00:01.000>text <00:00:02.000&>will <00:00:03.000>appear <00:00:04.000>over <00:00:05.000>6 <00:00:06.000>seconds.

voice 标签

voice 标签很不错，因为它有助于识别谁在说话。

WEBVTT

00:00:00.000 --> 00:00:03.000
How was your day, Bob?

00:00:03.000 --> 00:00:06.000
Great, yours?

ruby 标签

ruby 标签是一种在字幕上方显示小的注释字符的方法。

WEBVTT

00:00:00.000 --> 00:00:05.000
<ruby>This caption will have text above it<rt>This text will appear above the caption.</rt></ruby>

总结

关于WebVTT就讲到这里了！这是一项非常有用的技术，为提升网站的可访问性提供了极大的机会，尤其是在处理视频时。自己尝试一些字幕，以便更好地了解它！

Mitch

# 2019年7月17日

您是否了解浏览器对voice标签的支持情况？对我来说似乎没有显示出来。我正在使用videoJS。

Flimm

# 2019年7月18日

WebVTT文件需要以UTF-8编码吗？或者它们可以以其他编码方式编码吗？

Malc

评论永久链接# 2019年8月17日

谢谢！

Gary Katsevman

# 2019年7月22日

voice 标签受支持，但我认为没有浏览器为不同的声音提供默认颜色。您必须手动提供样式。
样式本身也很复杂，因为大多数浏览器都不支持它。vtt.js项目（Video.js在Safari以外的浏览器上默认用于字幕）不支持webvtt中的CSS扩展。

根据规范，webvtt文件必须是utf-8：https://www.w3.org/TR/webvtt/#file-structure