通过Webvtt改善视频可访问性

“网络的力量在于其普遍性。无论残疾与否，人人皆可访问是至关重要的方面。” – Tim Berners-Lee

网站开发中，无障碍访问至关重要。随着视频内容日益普及，字幕内容的需求也日益增长。WebVTT 是一种技术，它作为一种字幕格式，可以轻松集成到现有的 Web API 中，从而解决了字幕内容的问题。

本文将对此进行探讨。当然，WebVTT 在最基本层面上就是字幕，但可以通过多种方式来实现它，从而使视频（以及字幕内容本身）对用户更易于访问。

WebVTT 格式简介

首先：WebVTT 是一种包含文本“WebVTT”和带有时间戳的字幕行的文件类型。示例如下：

<code>WEBVTT

00:00:00.000 --> 00:00:03.000
- [鸟鸣声]
- 真美好的一天！

00:00:04.000 --> 00:00:07.000
- [溪流潺潺]
- 的确如此！

00:00:08.000 --> 00:00:10.000
- 你好！</code>

有点奇怪，但很有道理，对吧？正如你所看到的，第一行是“WEBVTT”，后面跟着第三行的时间范围（在本例中为 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 视频元素中。

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

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

顺便说一下，让我们来了解一下所有属性：

• srclang 指示轨道的语言。
• kind 表示轨道的类型，共有五种：
  • 字幕通常是视频不同部分的翻译和描述。
  • 描述帮助视力障碍用户理解视频中发生的事情。
  • 字幕为听力障碍用户提供音频的替代方案。
  • 元数据是由脚本使用的轨道，用户看不到。
  • 章节有助于导航视频内容。
• label 是出现在字幕轨道中的文本轨道的标题
• src 是轨道的源文件。除非指定了 crossorigin，否则它不能来自跨源。

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

深入探讨 WebVTT 文件的结构

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

• 可选的字节顺序标记 (BOM)
• 字符串“WEBVTT”
• WebVTT 右侧的可选文本标题。
  • WebVTT 后面必须至少有一个空格。
  • 你可以使用它向文件添加描述。
  • 你可以在文本标题中使用除换行符或字符串“-->”之外的任何内容。
• 空行，相当于两个连续的换行符。
• 零个或多个提示或注释。
• 零个或多个空行。

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

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

我们绝对可以在 WebVTT 文件中使用一些内联 HTML 格式！这些都是每个人都熟悉的：、 和 。你使用它们的方式与在 HTML 中完全相同。

<code>WEBVTT

00:00:00.000 --> 00:00:03.000 align:start
这是<b>粗体文本</b>

00:00:03.000 --> 00:00:06.000 align:middle
这是<i>斜体文本</i>

00:00:06.000 --> 00:00:09.000 vertical:rl align:middle
这是<u>下划线文本</u></code>

提示设置

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

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

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

设置 1：行

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

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

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

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

很难在没有示例的情况下想象这一点，对吧？以下是这如何转换为代码：

<code>00:00:00.000 --> 00:00:03.000 line:50%
此字幕应水平放置在屏幕的大致中心。</code>

<code>00:00:03.000 --> 00:00:06.000 vertical:lr line:50%
此字幕应垂直放置在屏幕的大致中心。</code>

<code>00:00:06.000 --> 00:00:09.000 vertical:rl line:-1
此字幕应垂直放置在视频的左侧。</code>

<code>00:00:09.000 --> 00:00:12.000 line:0
字幕应水平放置在屏幕顶部。</code>

设置 2：垂直

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

<code>  00:00:00.000 --> 00:00:03.000 vertical:rl
此字幕应垂直显示。</code>

<code>00:00:00.000 --> 00:00:03.000 vertical:lr
此字幕应垂直显示。</code>

设置 3：位置

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

<code>00:00:00.000 --> 00:00:03.000 vertical:rl position:100%
此字幕将垂直显示并在底部。

00:00:03.000 --> 00:00:06.000 vertical:rl position:0%
此字幕将垂直显示并在顶部。</code>

此时，你可能会注意到 line 和 position 与 CSS flexbox 属性 align-items 和 justify-content 类似，而 vertical 与 flex-direction 非常相似。记住 WebVTT 方向的一个技巧是，line 指定与文本流垂直的位置，而 position 指定与文本流平行的位置。这就是为什么如果我们指定 vertical，line 会突然沿水平轴移动，而 position 会沿垂直轴移动的原因。

设置 4：大小

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

<code>00:00:00.000 --> 00:00:03.000 vertical:rl size:50%
此字幕将垂直填充屏幕的一半。</code>

<code>00:00:03.000 --> 00:00:06.000 position:0%
此字幕将水平填充整个屏幕。</code>

设置 5：对齐

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

我们拥有的值是：start、middle、end、left 和 right。如果没有指定 vertical，则对齐方式正是它们听起来的样子。如果指定了 vertical，它们实际上将变为 top、middle（垂直）和 bottom。使用 start 和 end 而不是 left 和 right 分别是一种更灵活的方式，允许对齐基于 unicode-bidi CSS 属性的纯文本值。

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

<code>WEBVTT

00:00:00.000 --> 00:00:03.000 align:start
此字幕将出现在屏幕左侧。

00:00:03.000 --> 00:00:06.000 align:middle
此字幕将水平位于屏幕中央。

00:00:06.000 --> 00:00:09.000 vertical:rl align:middle
此字幕将垂直位于屏幕中央。

00:00:09.000 --> 00:00:12.000 vertical:rl align:end
此字幕将垂直位于屏幕的右下角，而不管 vertical:lr 或 vertical:rl 的方向如何。

00:00:12.000 --> 00:00:15.000 vertical:lr align:end
此字幕将垂直位于屏幕底部，而不管 vertical:lr 或 vertical:rl 的方向如何。

00:00:12.000 --> 00:00:15.000 align:left
此字幕将出现在屏幕左侧。

00:00:12.000 --> 00:00:15.000 align:right
此字幕将出现在屏幕右侧。</code>

WebVTT 注释

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

<code>WEBVTT

00:00:00.000 --> 00:00:03.000
- [鸟鸣声]
- 真美好的一天！

NOTE 这是一个注释。观看字幕的任何人都不会看到它。

00:00:04.000 --> 00:00:07.000
- [溪流潺潺]
- 的确如此！

00:00:08.000 --> 00:00:10.000
- 你好！</code>

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

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

其他一些有趣的 WebVTT 功能

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

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

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

<code>video::cue {
  background: red;
}</code>

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

<code>video::cue(i) {
  color: yellow;
}</code>

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

<code>WEBVTT

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

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

<code>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
你好，世界！

middle cue identifier
00:00:02.000 --> 00:00:04.000
此提示标识符将带有下划线！

cue identifier 3
00:00:04.000 --> 00:00:06.000
这个不会受到影响，就像第一个一样！</code>

不同类型的标签

许多标签可用于设置字幕格式。有一个警告。这些标签不能用于 kind 属性为 chapters 的元素中。以下是一些你可以使用的格式化标签。

class 标签

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

<code>/* 我们的 CSS 文件 */
.yellowish {
  color: yellow;
}
.redcolor {
  color: red;
}</code>

<code>WEBVTT

00:00:00.000 --> 00:00:03.000
此文本应为黄色。此文本将为默认颜色。

00:00:03.000 --> 00:00:06.000
此文本应为红色。此文本将为默认颜色。</code>

时间戳标签

如果要使字幕出现在特定时间，则需要使用时间戳标签。它们就像将字幕微调到精确的时间点一样。标签的时间必须在字幕的给定时间范围内，并且每个时间戳标签都必须晚于前一个。

<code>WEBVTT

00:00:00.000 --> 00:00:07.000
此文本将显示超过 6 秒。</code>

voice 标签

voice 标签很简洁，因为它们有助于识别谁在说话。

<code>WEBVTT

00:00:00.000 --> 00:00:03.000
鲍勃，你今天过得怎么样？

00:00:03.000 --> 00:00:06.000
很好，你呢？</code>

ruby 标签

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

<code>WEBVTT

00:00:00.000 --> 00:00:05.000
<ruby>此字幕将有文字显示在其上方<rt>此文字将显示在字幕上方。</rt></ruby></code>

结论

关于 WebVTT 就介绍到这里！这是一种非常有用的技术，它为极大地提高网站的可访问性提供了机会，特别是如果你正在使用视频。尝试自己编写一些字幕，以便更好地了解它！

以上是通过Webvtt改善视频可访问性的详细内容。更多信息请关注PHP中文网其他相关文章！