在当今的数字文化环境中，大多数的音频和视频内容都会添加字幕帮助听妈妈来看理解。虽然此举对于大多数人来说都很方便，但是对于视障人士来说，字幕更是必不可少的辅助工具。在本文中，我们将介绍WebVTT标准是什么以及如何使用它来实现无障碍字幕。
什么是 WebVTT？
WebVTT是一种处理文本tracks（对于视觉、字幕和描述性音频内容）的标准。 它的全称是Web Video Text Tracks，并且它可以与常见的视频文件格式（如MP4）一起使用。
WebVTT是一种文本文件形式，其中包含与一个特定视频相关的文本轨道和相应的时间戳。这些时间戳表示了文本的开始和结束时间，并且必须与视频同步。 在实践中，作者可以使用CSS样式文件来自定义字幕的外观和位置。
如何使用 WebVTT 实现无障碍字幕？
实现WebVTT无障碍字幕大致可以分为两个步骤：创建WebVTT文件并将其与视频文件相关联。让我们一步一步来看看如何完成这些任务。
创建 WebVTT 文件
创建WebVTT文件的最好方法是从头开始创建一个具有正确的格式和语法的新文件。WebVTT文件应该以“WEBVTT”开头，然后有一些信息标记的元数据段，其次是每个字幕的文本、时间戳和任何自定义样式信息。 下面是一个WebVTT文件的例子：
-- -------------------- ---- ------- ------ - --------- --- --------- ------ ------ - --------- --- --------- ------- -- -- ------ - --------- --- --------- ------ ----- --- -----
在这个简单的WebVTT文件中，我们有三个文本窗格。每个文本部分都有一个唯一的識別号，接着是一个时间戳，最后是字幕文本。
将 WebVTT 文件与视频文件相关联
一旦您创建了一个WebVTT文件，您需要将它与视频文件相关联，以便在视频播放时可以自动加载字幕。要实现这一点，您需要明确告知视频客户端您希望加载的WebVTT文件的位置。这可以通过添加<track>标记对HTML视频进行完成。
<video controls> <source src="my-video.mp4" type="video/mp4"> <track src="my-subtitles.vtt" kind="subtitles" srclang="en" label="English"> </video>
在这个简单的HTML代码中，我们加载一个MP4视频文件和一个名为“my-subtitles.vtt”的WebVTT文件。请注意，kind的属性值为“字幕”，srclang 指定语言，label为标签的显示名称。
使用CSS自定义样式
CSS样式可用于改变字幕的任何外观属性。以下代码显示如何使用CSS来设置字幕背景。
::cue {
color: white;
background-color: black;
}您可以使用::cue来选择WebVTT的文本，而将样式应用于 WebVTT 的文本的任何CSS样式都将被应用。
示例代码
下面是一个完整的示例代码，其中包含一个WebVTT文件，一个视频文件，以及将两者相关联的HTML代码。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- --------- ------------
-------
----- -
------ ------
----------------- ------
-
--------
-------
------
------ ---------
------- ------------------ -----------------
------ ---------------------- ---------------- ------------ ----------------
--------
-------
-------结论
WebVTT标准是实现无障碍字幕的必要工具，因为它带来了极大的便利性。本文介绍了如何使用WebVTT标准来实现无障碍字幕，以帮助视障人士更好地理解您的视频内容。通过准确地编写WebVTT文件并使用HTML嵌入正确的代码，您将能够为您的观众提供更好的观看体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f63f72c5c563ced580d244