在本文中,您将了解 WebVTT(网络视频文字轨道)格式, 用于描述定时文本数据,例如字幕 让您的观众更方便地观看视频
无障碍功能不同于锦上添花,你绝不会在电脑上放置任何东西 希望以后能介绍这些内容字幕和屏幕阅读器 说明是您观看视频的唯一途径 则甚至需要遵守法律或法规。
添加 <track>
标记
如需为网络视频添加字幕或屏幕阅读器说明,请添加<track>
放在 <video>
标记中。除字幕和屏幕阅读器之外
<track>
标记也可以用于字幕和章节标题。
<track>
标记还可以帮助搜索引擎了解视频中的内容。
不过,这些功能不在本文的讨论范围内。
![显示 Android 版 Chrome 中使用跟踪元素显示字幕的屏幕截图](https://web.developers.google.cn/static/articles/media-accessibility/image/screenshot-showing-captio-8ddb67f7d86db.jpg?authuser=9&hl=bg)
<track>
标记与 <source>
元素类似,因为它们都具有 src
属性。对于 <track>
标记,它指向
WebVTT 文件。label
属性用于指定特定曲目的呈现效果
界面中的标识名
如需为多种语言提供轨道,请为每个语言添加单独的 <track>
标记
您提供的 WebVTT 文件,并使用 srclang
指明语言
属性。
下面显示了一个包含两个 <track>
标记的示例 <video>
标记。还有一个
您可以在 Glitch 上查看示例(来源)。
添加 <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>
WebVTT 文件结构
以下是针对上文链接的演示的假设性 WebVTT 文件。该文件是 文本文件,其中包含一系列 cues。每个插入点都是要显示的文本块 以及显示时间范围。
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。每个插入点都有一个开始时间
结束时间(以箭头分隔),下一行中的提示文字。提示可以
还可以选择包含下例中的 railroad
和 manuscript
等 ID。
插入点之间以空行分隔。
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
:不可见,并且可供脚本使用。
现在,你已经了解了关于制作视频可供观看和观看的基础知识 您可能需要考虑更复杂的用例。接下来,您将 了解媒体框架,以及它们如何帮助您添加 同时提供高级功能