WebVTT：网络视频文本轨道格式

W3C候选推荐

本版本：
https://www.w3.org/TR/2019/CR-webvtt1-20190404/
最新发布版本：
https://www.w3.org/TR/webvtt1/
编辑草案：
https://w3c.github.io/webvtt/
以往版本：
测试套件：
https://github.com/web-platform-tests/wpt/tree/master/webvtt
编辑者：
(CSIRO)
前任编辑：
(Opera Software AS)
(NICTA)
(Opera Software ASA)
(Google)
参与方式：
GitHub w3c/webvtt (新建议题, 待处理议题, 历史待处理漏洞)
提交记录：
GitHub w3c/webvtt/commits
@webvtt

Copyright © 2019 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.

摘要

本规范定义了WebVTT，即Web视频文本轨道格式。其主要用途是用于配合HTML <track> 元素对外部文本轨道资源进行标记。 WebVTT文件为视频内容提供字幕或说明字幕，并可用于文本视频描述[MAUR]、内容导航章节以及与音频或视频内容时间对齐的任何形式的元数据。

本规范基于社区组报告草案 的 Web媒体文本轨道社区组。

本文档状态

本节描述了本文档在发布时的状态。其他文档可能会取代本文档。W3C当前出版物列表及本技术报告的最新修订版可在W3C技术报告索引 https://www.w3.org/TR/查阅。

本文件由 W3C 定时文本工作组作为候选推荐标准（Candidate Recommendation）制作。本文件计划成为W3C推荐标准。如需对本文件提出意见，请发送到 public-tt@w3.org (订阅， 存档)，邮件主题开头请加上 [webvtt]。欢迎提出任何意见。 W3C发布候选推荐标准旨在表明该文件已趋于稳定，并鼓励开发者社区实施。为了确保广泛审查，本文件将在2019年5月2日之前保持候选推荐标准状态。

请参见工作组的实现报告。

为了使本规范退出CR阶段，必须在实现报告中记录本规范所定义的每一项功能至少有2个独立实现。实现报告基于实现者提供的测试套件测试结果。工作组不要求实现必须公开提供，但鼓励这样做。

以下功能存在风险，可能会在CR阶段被删除：

自WebVTT首次公开工作草案 发布后对本版本应用的所有变更汇总，详见FPWD WebVTT 变更。

为方便起见，本版本与WebVTT前一版工作草案的完整差异，见与前一版工作草案的差异。

作为候选推荐标准发布并不代表 W3C 成员的认可以及支持。此份文档为草稿，可能随时被其他文档更新、替换或废弃。除作为“进行中工作”外，不宜引用本文件。

本文件由依据W3C专利政策运营的小组制定。W3C维护着与该小组交付物相关的已披露专利列表；该页面同时包含专利披露指引。任何个人若知晓某项专利中包含必要权利要求，都须依据W3C专利政策第6节进行披露。

本文件受2019年3月1日W3C流程文档管理。

1. 简介

本节为非规范性内容。

WebVTT（网页视频文本轨道）格式旨在配合 HTML <track> 元素用于标记外部文本轨道资源。

WebVTT 文件为视频内容提供字幕或说明字幕，也可用于文本视频描述[MAUR]、内容导航章节，以及更广泛地用于与音频或视频内容时间同步的任何形式的元数据。

本规范当前版本的大部分内容都致力于描述如何将 WebVTT 文件用于字幕或说明字幕。目前关于章节和时间同步元数据的信息有限，尚未涉及视频描述的相关内容。

本节将通过一些 WebVTT 文件示例进行介绍。

1.1. 一个简单的字幕文件

本节为非规范性内容。

WebVTT 文件的主要用途是为视频内容添加字幕或说明字幕。以下是为一次访谈添加字幕的示例文件：

WEBVTT

00:11.000 --> 00:13.000
<v Roger Bingham>我们在纽约市

00:13.000 --> 00:16.000
<v Roger Bingham>我们现在实际上在卢森酒店，就在这条街上

00:16.000 --> 00:18.000
<v Roger Bingham>距离美国自然历史博物馆不远

00:18.000 --> 00:20.000
<v Roger Bingham>和我在一起的是 Neil deGrasse Tyson

00:20.000 --> 00:22.000
<v Roger Bingham>天体物理学家，海登天文馆馆长

00:22.000 --> 00:24.000
<v Roger Bingham>在AMNH。

00:24.000 --> 00:26.000
<v Roger Bingham>感谢你走到这里。

00:27.000 --> 00:30.000
<v Roger Bingham>我想对上次我们的对话做一个跟进。

00:30.000 --> 00:31.500 align:right size:50%
<v Roger Bingham>当我们在写电子邮件时——

00:30.500 --> 00:32.500 align:left size:50%
<v Neil deGrasse Tyson>上次谈话难道还不够吗？

00:32.000 --> 00:35.500 align:right size:50%
<v Roger Bingham>不！当然不够，因为因为很显然因为

00:32.500 --> 00:33.500 align:left size:50%
<v Neil deGrasse Tyson><i>笑</i>

00:35.500 --> 00:38.000
<v Roger Bingham>你知道吗，我太激动了，眼镜都快掉下来了。

可以看到，一个 WebVTT 文件通常由与时间区间相关联的文本片段序列组成，称为提示（定义）。除了字幕和说明字幕外，WebVTT 还可用于时间同步元数据，通常用于在提示中传递键值对。WebVTT 也可用于传递章节，便于在音视频文件中进行上下文导航。最后，WebVTT 可以用于传递文本视频描述——即对一段时间内可视内容的文本描述，能被转换为语音，帮助视障用户理解内容。

本版本的 WebVTT 侧重于解决字幕和说明字幕的应用场景。针对其他用途的规范工作仍有可能继续。WebVTT 文件用于哪种场景由使用该文件的软件决定。例如，若与 HTML 文件配合 <track> 元素使用，kind 属性用于定义如何解释 WebVTT 文件。

以下小节将回顾 WebVTT 文件格式在字幕和说明字幕使用时的一些关键特性。

1.2. 多行字幕提示

本节为非规范性内容。

提示中的换行会被保留。用户代理如果需要将提示内容适应到提示宽度，也会自动插入额外的换行。因此，一般建议作者尽量将提示内容写在一行，除非确实需要换行。

下面的公共服务公告视频字幕演示了如何进行换行：

WEBVTT

00:01.000 --> 00:04.000
切勿饮用液氮。

00:05.000 --> 00:09.000
— 它会穿破你的胃。
— 你可能会丧命。

00:10.000 --> 00:14.000
样本公益宣传组织对本广告内容或基于所提供信息采取的任何行动的后果不承担任何责任。

第一个提示很简单，通常只显示一行。第二个提示将占据两行，每个说话者各一行。第三个提示将根据视频宽度进行自动换行，可能占用多行。例如，字幕显示效果如下：

           切勿饮用液氮。

        — 它会穿破你的胃。
                — 你可能会丧命。

    样本公益宣传组织对本广告
    内容不承担责任，亦不对因依
    据所提供信息采取的任何行为
     产生之后果负责。

如提示宽度较窄，前两个提示也可能换行，如下例。但第二个提示的显式换行依然被保留：

      切勿饮用
    液氮。

  — 它会穿破
      你的胃。
    — 你可能会丧命。

  样本公益
  宣传组织对
  本广告内容
  不承担责任，
     亦不对因依
  据所提供信
   息采取的任何
  行为产生之后
    果负责。

注意，自动换行会尽量让每行长度平衡。

1.3. 字幕样式

本节为非规范性内容。

应用于包含 video 元素的 HTML 页面上的 CSS 样式表，可以通过 ::cue、::cue()、::cue-region 和 ::cue-region() 伪元素来选中视频中的 WebVTT 提示和区域。

在本例中，HTML 页面中的 style 元素包含一个 CSS 样式表，给视频中的所有提示添加渐变背景和文本颜色，同时改变视频中所有提示内 WebVTT 粗体对象 的文本颜色。

<!doctype html>
<html>
 <head>
  <title>Styling WebVTT cues</title>
  <style>
   video::cue {
     background-image: linear-gradient(to bottom, dimgray, lightgray);
     color: papayawhip;
   }
   video::cue(b) {
     color: peachpuff;
   }
  </style>
 </head>
 <body>
  <video controls autoplay src="video.webm">
   <track default src="track.vtt">
  </video>
 </body>
</html>

CSS 样式表同样可以嵌入在 WebVTT 文件本身。

样式块放在所有头部之后、首个提示之前，并以 "STYLE" 行开始。注释块可与样式块交错出现。

样式表中不能出现空行。可将空行移除，或用空格或 CSS 注释（如 /**/）填充。

字符串 "-->" 不能出现在样式表中。如果样式表被包裹在 "<!--" 和 "-->" 之间，可以直接将这些字符串移除。如果 "-->" 出现在 CSS 字符串内，可以使用 CSS 转义，例如 "--\>"。

本例展示了如何通过 WebVTT 文件中的样式块为提示设置样式。

WEBVTT

STYLE
::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}
/* Style blocks cannot use blank lines nor "dash dash greater than" */

NOTE comment blocks can be used between style blocks.

STYLE
::cue(b) {
  color: peachpuff;
}

hello
00:00:00.000 --> 00:00:10.000
Hello <b>world</b>.

NOTE style blocks cannot appear after the first cue.

1.4. 其他字幕和说明功能

本节为非规范性内容。

WebVTT 还支持一些不常用的功能。

此例中，每个提示都有一个标识符：

WEBVTT

test
00:00.000 --> 00:02.000
这是一个测试。

123
00:00.000 --> 00:02.000
那是一个——那是一个L！

crédit de transcription
00:04.000 --> 00:05.000
由Célestes™转录

这样样式表就能专门为这些提示设置样式。

/* 针对 test 提示的样式 */
::cue(#test) { color: lime; }

由于CSS语法规则，某些字符需要用CSS字符转义。如ID以数字0-9开头，则需转义。ID 123 可表示为 "\31 23"（31为字符“1”的Unicode编码）。详见在标记和CSS中使用字符转义。

/* 针对 123 提示的样式 */
::cue(#\31 23) { color: lime; }
/* 针对 crédit de transcription 提示的样式 */
::cue(#crédit\ de\ transcription) { color: red; }

本例展示了如何在元素上使用类，这对于本地化或样式可维护性有帮助，也展示了如何在提示文本中标记语言切换。

WEBVTT

04:02.500 --> 04:05.000
我13、14岁时开始打篮球

04:05.001 --> 04:07.800
在<i.foreignphrase><lang en>playground</lang></i>，就在蒙彼利埃这里

本例中，每条提示用语音片段标明说话人。第一条提示中说话人片段还带有“first”和“loud”两个类。第三条提示除了说话人外，还有斜体文本（无指定说话人）。最后一条提示只有一个“loud”类。

WEBVTT

00:00.000 --> 00:02.000
<v.first.loud Esme>这是棵蓝色苹果树！

00:02.000 --> 00:04.000
<v Mary>不可能！

00:04.000 --> 00:06.000
<v Esme>嘿！</v> <i>笑声</i>

00:06.000 --> 00:08.000
<v.loud Mary>太棒了！

注意，对于只覆盖整个提示内容的语音片段，可不必显式闭合该片段标签（特例）。

样式表可以为这些片段设置样式：

::cue(v[voice="Esme"]) { color: cyan }
::cue(v[voice="Mary"]) { color: lime }
::cue(i) { font-style: italic }
::cue(.loud) { font-size: 2em }

本例展示了如何将提示精准定位在视频视口的指定位置。

WEBVTT

00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
他去哪儿了？

00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
我觉得他走这条通道了。

00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
你还等什么？

因为这些提示是水平的，position 设置指的是视频视口宽度的百分比。如果文本为垂直方向，则 position 设置表示视频视口高度的百分比。

"line-left" 和 "line-right" 指的是position设置所应用的盒子实体边，不区分水平方向或垂直方向，不影响文本在盒子内的朝向。

这些提示只覆盖视频视口宽度的35%——这是所有三个提示的提示框 "size"。

第一个提示框提示盒 定位在10%。"line-left"和"line-right"指明"position"应用于盒子的哪侧。此例是水平方向，"line-left"为盒子的左侧，于是提示盒就在视频宽度的10%-45%区间，通常在画面左侧说话人下方。若为垂直提示，则"line-left"自画面高度顶部开始，提示盒覆盖35%的高度。

第一条提示的文本在提示盒内通过"align"进行对齐。左右书写为start时，left对应盒子左侧；RTL文本right对应盒子右侧。因此文本始终处于人物下方。注意box的"center"对齐是start对齐的默认，以避免文本基线方向变化时盒子位置变化（如因翻译导致方向变化）。

第二条提示的提示盒右对齐于视口宽度的90%（右对齐盒子）。同样效果也可用"position:55%,line-left"实现，明确定位。第三条提示内容位于与第一条相同位置的提示盒，内容居中。

本例展示了两个区域分别展示不同说话人的滚动字幕。Fred 的提示在视频左半区滚动，Bill 的在右半区滚动。Fred 的首个提示虽然定义直到20秒，但在12.5秒时消失，因为该区域只显示三行字幕，12.5秒时出现第4条提示：

WEBVTT

REGION
id:fred
width:40%
lines:3
regionanchor:0%,100%
viewportanchor:10%,90%
scroll:up

REGION
id:bill
width:40%
lines:3
regionanchor:100%,100%
viewportanchor:90%,90%
scroll:up

00:00:00.000 --> 00:00:20.000 region:fred align:left
<v Fred>你好，我叫Fred

00:00:02.500 --> 00:00:22.500 region:bill align:right
<v Bill>你好，我是Bill

00:00:05.000 --> 00:00:25.000 region:fred align:left
<v Fred>要不要去喝杯咖啡？

00:00:07.500 --> 00:00:27.500 region:bill align:right
<v Bill>好的！我今天才喝过一杯。

00:00:10.000 --> 00:00:30.000 region:fred align:left
<v Fred>我这是第四杯了！

00:00:12.500 --> 00:00:32.500 region:fred align:left
<v Fred>那走吧。

注意，区域只对水平提示有效。

1.5. WebVTT中的注释

本节为非规范性内容。

WebVTT 文件中可包含注释。

注释块须以空行起始， "NOTE"（后跟空格或换行）开头，并在遇到下一个空行结束。

下例用单行注释标注对某条提示时序的疑问。

WEBVTT

00:01.000 --> 00:04.000
切勿饮用液氮。

NOTE 我不确定下条提示的时序是否正确。

00:05.000 --> 00:09.000
— 它会穿破你的胃。
— 你可能会丧命。

此例作者写了多条注释。

WEBVTT

NOTE
本文件由Jill编写。希望你喜欢阅读。需要注意：
- 我是通过看口型写的，提示内容可能不是百分百准确
- 我没太留意每条提示具体何时该出现或消失。

00:01.000 --> 00:04.000
切勿饮用液氮。

NOTE 检查下一条提示

00:05.000 --> 00:09.000
— 它会穿破你的胃。
— 你可能会丧命。

NOTE 文件结束

1.6. 章节示例

本节为非规范性内容。

WebVTT 文件可直接由章节组成，这些章节即为视频导航标识。

章节为纯文本内容，通常只含一行。

此例中，一个演讲被划分为每一张幻灯片为一章节。

WEBVTT

NOTE
这是Silvia关于WebVTT演讲中的内容。

Slide 1
00:00:00.000 --> 00:00:10.700
标题页

Slide 2
00:00:10.700 --> 00:00:47.600
Naomi Black介绍

Slide 3
00:00:47.600 --> 00:01:50.100
网页字幕的影响

Slide 4
00:01:50.100 --> 00:03:33.000
视频文本格式的需求

1.7. 元数据示例

本节为非规范性内容。

WebVTT 文件可由时间同步的元数据组成。

元数据可以为任意字符串，通常以JSON结构给出。

注意，元数据块中不可包含空行，因为空行表示WebVTT提示的结束。

本例中，一个演讲被划分为每张幻灯片为一章节。

WEBVTT

NOTE
感谢 http://output.jsbin.com/mugibo

1
00:00:00.100 --> 00:00:07.342
{
 "type": "WikipediaPage",
 "url": "https://en.wikipedia.org/wiki/Samurai_Pizza_Cats"
}

2
00:07.810 --> 00:09.221
{
 "type": "WikipediaPage",
 "url" :"http://samuraipizzacats.wikia.com/wiki/Samurai_Pizza_Cats_Wiki"
}

3
00:11.441 --> 00:14.441
{
 "type": "LongLat",
 "lat" : "36.198269",
 "long": "137.2315355"
}

2. 一致性

本规范中的所有图示、示例和注释均为非规范性内容，所有明确标注为非规范性的章节也同样如此。本规范的其余部分为规范性内容。

规范性部分中使用的关键词 "MUST"、"MUST NOT"、"SHOULD"、"SHOULD NOT"、"MAY" 和 "OPTIONAL" 应按 RFC2119 中的定义来解释。规范性部分中使用的关键词 "OPTIONALLY" 的规范含义与 "MAY" 和 "OPTIONAL" 相同。为提高可读性，这些词在本规范中未全部采用大写字母形式。[RFC2119]

以命令式表述的要求（例如“去除任何前导空格字符”或“返回 false 并中止这些步骤”）应按引入该算法时所用关键词（“must”、“should”、“may”等）的含义来解释。

以算法或具体步骤形式表述的一致性要求可以用任意方式实现，只要最终结果等价即可。（特别是，本规范中定义的算法旨在便于理解，而不是为性能优化设计。）

2.1. 一致性类别

本规范描述了用户代理（与实现者相关）的合规性准则，以及 WebVTT 文件（与作者和创作工具实现者相关）的合规性准则。

§4 语法 定义了构成有效 WebVTT 文件 的内容。作者需遵循该处的要求，并建议使用一致性检查器。§6 解析 定义了用户代理如何解释被标记为 text/vtt 的文件（包括有效与无效的 WebVTT 文件）。解析规则对作者错误更为宽容，以便于扩展并在存在某些语法错误时仍能渲染提示。

例如，即使两个提示之间的空行被跳过，解析器仍会创建两个提示。这显然是一个错误，因此一致性检查器会将其标记为错误，但对用户渲染这些提示仍然有用。

用户代理分为若干（可能重叠的）类别，每类有不同的一致性要求。

支持脚本的用户代理

本规范中的所有处理要求均适用。该用户代理还必须作为本规范中 IDL 片段的相容实现，如 Web IDL 规范中所述。 [WEBIDL-1]

不支持脚本的用户代理

本规范中的所有处理要求均适用，但不包括 §6.5 WebVTT 提示文本 DOM 构造规则 和 §9 API 中的要求。

不支持 CSS 的用户代理

本规范中的所有处理要求均适用，除了与样式表和 CSS 相关的 §6 解析 的部分，以及整个 §7 渲染 和 §8 CSS 扩展。此类用户代理必须以适当方式仅渲染 WebVTT 字幕或说明字幕提示文本 内的文本，并明确支持 §5 WebVTT 字幕或说明提示组件的默认类 中定义的颜色类。任何其他样式指令为可选项。

不支持完整 HTML/CSS 引擎的用户代理

本规范中的所有处理要求均适用，包括在 §5 WebVTT 字幕或说明提示组件的默认类 中定义的颜色类。然而，该类用户代理需要以一种方式实现 §6 解析、§7 渲染 和 §8 CSS 扩展 中的与 CSS 相关功能，使得渲染结果等同于完整支持 CSS 的渲染器所产生的结果。

支持完整 HTML/CSS 引擎的用户代理

本规范中的所有处理要求均适用。但允许使用的 CSS 样式集是有限的，因为 不支持完整 HTML/CSS 引擎的用户代理 需要实现等效的 CSS 功能。因而，支持完整 CSS 引擎的用户代理必须限制其为 WebVTT 应用的 CSS 样式，以便实现相同的渲染，而不引入超出 WebVTT 规范范围的额外样式影响。

一致性检查器

一致性检查器必须验证 WebVTT 文件 是否符合本规范中描述的适用一致性准则。规范中将“validator”（验证器）一词视为一致性检查器的同义词。

创作工具

创作工具必须生成符合规范的 WebVTT 文件。将其他格式转换为 WebVTT 的工具也被视为创作工具。

当创作工具用于编辑一个不符合规范的 WebVTT 文件 时，它可以在编辑会话中保留未被编辑部分的合规性错误（即编辑工具允许对错误内容进行往返保存）。然而，如果错误被保留，创作工具不得宣称其输出是符合规范的。

2.2. Unicode 规范化

实现本规范时不得在处理过程中对 Unicode 文本进行规范化。

例如，一个提示的标识符如果由字符 U+0041 LATIN CAPITAL LETTER A 后跟 U+030A COMBINING RING ABOVE（分解字符序列）组成，或者由兼容字符 U+212B ANGSTROM SIGN 组成，则不会与选择器匹配一个使用预合成字符 U+00C5 LATIN CAPITAL LETTER A WITH RING ABOVE 的 ID。

3. 数据模型

WebVTT 的盒模型由三个关键要素组成：视频视口（video viewport）、提示（cues）和区域（regions）。视频视口是渲染区域，提示和区域在其中渲染。提示是由若干提示行组成的盒子。区域是视频视口的子区域，用于将提示分组。提示可以直接定位在视频视口内，也可以定位在位于视口内的某个区域中。

提示在视频视口内的位置由一组提示设置（cue settings）定义。区域在视频视口内的位置由一组区域设置（region settings）定义。位于区域内的提示只能使用其有限的提示设置。具体来说，如果提示具有 "vertical"、"line" 或 "size" 设置，则该提示不属于区域；否则，提示的宽度相对于区域宽度而非视口宽度来计算。

3.1. 概述

本节为非规范性内容。

WebVTT 文件是与视频或音频资源时间对齐的数据块的容器文件。因此可以将其视为时间对齐数据的序列化格式。

WebVTT 文件以一个头部开始，随后包含一系列数据块。如果某个数据块具有开始和结束时间，则称之为 WebVTT 提示（cue）。注释则是另一类数据块。

WebVTT 文件可以承载不同种类的数据。HTML 规范将 captions、subtitles、chapters、audio descriptions 和 metadata 识别为数据种类，并在 text track kind 属性中指定正在使用的数据种类（参见 [HTML51]）。

一个 WebVTT 文件必须只包含一种数据种类，不能混合多种数据种类。WebVTT 文件的数据种类由外部指定，例如在 HTML 文件的 text track 元素中指定。运行环境负责正确解释数据。

WebVTT 字幕或说明提示作为叠加层渲染在视频视口之上或渲染到视频视口内的一个区域（region）。

3.2. WebVTT 提示

一个 WebVTT 提示 是一种 文本轨道提示（text track cue）[HTML51]，并另外包含下列内容：

提示文本

提示的原始文本，以及其解释规则。

3.3. WebVTT 字幕或说明提示

一个 WebVTT 字幕或说明提示 是一个 WebVTT 提示，其具有下列附加属性，使得提示文本可以被渲染并转换为 DOM 片段：

提示盒（cue box）

WebVTT 提示 的提示盒是一个盒子，提示中所有行的文本都将在该盒子内渲染。若提示属于某个区域，则该盒子渲染到视口内的区域；否则渲染到视频视口内。

提示盒在视频视口或区域中的位置依赖于 WebVTT 提示位置 和 WebVTT 提示行 的值。

若行长度需要换行，则会在提示盒的 大小 范围内换行。

书写方向

书写方向可以为：

  • 水平（行水平延展，由视频视口顶部向下偏移，连续行在其下方显示），
  • 垂直向左增长（行垂直延展，由视频视口右侧向左偏移，连续行在其左侧显示），或
  • 垂直向右增长（行垂直延展，由视频视口左侧向右偏移，连续行在其右侧显示）。

书写方向会影响 行、位置 和 大小 设置的解释，是相对于视频的宽度还是高度。

默认情况下，书写方向设置为 水平。

“垂直向左增长”书写方向可用于中文、日文、韩文的竖排；“垂直向右增长”书写方向可用于蒙古文的竖排。

snap-to-lines 标志

一个布尔值，指示 line 是否为整数行数（使用提示第一行的行高），或是否为视频维度的百分比。当按行计数时该标志为 true，否则为 false。

当标志为 false 时，若多个提示位于同一位置，将按规避重叠的方式对提示进行偏移。

默认情况下，snap-to-lines 标志 设置为 true。

行（line）

行 定义了 提示盒 的定位。

行 将 提示盒 从视频视口的顶部、右侧或左侧偏移，该偏移由 书写方向、snap-to-lines 标志 或任何其他正在显示轨道占用的行数决定。

行 可以设置为行数、视频视口高度或宽度的百分比，或特殊值 auto，表示偏移应依赖于其他正在显示的轨道。

默认情况下，行 设置为 auto。

如果 书写方向 为 水平，则行的百分比相对于视频高度，否则相对于视频宽度。

一个 WebVTT 提示 有一个 计算行，其值由下述算法返回，该算法以提示的其他属性为参数：

  1. 如果 line 是数字，且该提示的 snap-to-lines 标志 为 false，并且该 line 为负数或大于 100，则返回 100 并中止这些步骤。

    尽管 WebVTT 解析器 不会将 line 设置为超出 0..100 范围的数字同时又将 snap-to-lines 标志 设为 false，但当通过 DOM API 的 snapToLines 和 line 属性设置时，这种情况可能会发生。

  2. 如果 line 是数字，则返回该 WebVTT 提示行 的值并中止这些步骤。（要么 snap-to-lines 标志 为 true，因此任何值（不仅限于 0..100）都是有效的，要么该值在 0..100 范围内，因此无论该标志为何值都是有效的。）

  3. 如果该 WebVTT 提示 snap-to-lines 标志 为 false，则返回值 100 并中止这些步骤。（此时 line 为特殊值 auto。）

  4. 设 cue 为该 WebVTT 提示。

  5. 如果 cue 不在媒体元素的 提示列表 中，或该 文本轨道（text track） 不在媒体元素的 文本轨道列表 中，则返回 −1 并中止这些步骤。

  6. 设 track 为包含该 cue 的 文本轨道。

  7. 设 n 为在该媒体元素的 文本轨道列表 中并且位于 track 之前且其 文本轨道模式（text track mode） 为 showing 的文本轨道数量。

  8. 将 n 增加 1。

  9. 对 n 取负。

  10. 返回 n。

例如，如果在同一媒体元素中同时有两个文本轨道处于 showing 状态，且每个文本轨道当前都有一个活动的 WebVTT 提示 且它们的 line 都为 auto，那么第一个文本轨道的提示的 计算行 将为 −1，第二个为 −2。

行对齐（line alignment）

用于 提示盒 的 行 的对齐方式，其中之一：

开始对齐（Start alignment）
对于 水平 提示，提示盒的顶部边（对于水平）；对于 垂直向右增长 提示为左侧；对于 垂直向左增长 提示为右侧，对应于该 行 对齐。
居中对齐（Center alignment）
提示盒在该 行 处居中。
结束对齐（End alignment）
对于 水平 提示，提示盒的底边；对于 垂直向右增长 提示为右侧；对于 垂直向左增长 提示为左侧，与该 行 对齐。

默认情况下，行对齐 设置为 start。

行对齐与 文本对齐 是分离的——文本的左右方向性不会影响 行对齐。

位置（position）

位置 定义了沿 书写方向 的提示盒的缩进。

位置 要么为一个数值（以百分比表示提示盒的位置），要么为特殊值 auto，表示该位置取决于提示的 文本对齐。

如果提示不在某个 区域 内，则该百分比相对于视频视口维度解释；否则相对于区域维度解释。

默认情况下，位置 设置为 auto。

如果 书写方向 为 水平，则位置百分比相对于视频宽度解释，否则相对于视频高度解释。

一个 WebVTT 提示 有一个 计算位置，其值由下述算法返回，该算法以提示的其他属性为参数：

  1. 如果 position 为 0 到 100 之间的数字，则返回该 position 的值并中止这些步骤。（否则 position 为特殊值 auto。）

  2. 如果 提示文本对齐 为 left，则返回 0 并中止这些步骤。

  3. 如果 提示文本对齐 为 right，则返回 100 并中止这些步骤。

  4. 否则，返回 50 并中止这些步骤。

由于 WebVTT 提示位置对齐 的默认值为 center，如果提示没有 文本对齐 设置，提示位置 默认为 50%。

即使是带有从右到左文本的 水平 提示，提示盒的定位也总是从视频的左边缘开始。这允许定义一个渲染空间模板，可填充左到右或右到左的提示文本，或两者兼有。

对于具有不为 100% 的 size 且 文本对齐 为 start 或 end 的 WebVTT 提示，作者不得使用默认的 auto position。

当 文本对齐 为 start 或 end 时，auto position 为 50%。这与左对齐和右对齐文本的情形不同：对于左对齐和右对齐，auto position 分别为 0% 和 100%。之所以有上述要求，是因为自动定位对于 start 或 end 对齐文本可能产生意外结果。由于 提示文本 的行可以具有左到右的基方向或右到左的基方向，或不同行具有不同方向，这样的自动定位可能具有不符合预期的结果。

位置对齐（position alignment）

在书写方向维度上对 提示盒 的对齐，描述 position 锚定到何处，下列之一：

line-left 对齐
对于 水平 提示，提示盒的左侧（否则为顶部）在 position 处对齐。
居中对齐（Center）
提示盒在 position 处居中。
line-right 对齐
对于 水平 提示，提示盒的右侧（否则为底部）在 position 处对齐。
自动对齐（Auto）
提示盒的对齐取决于提示的 文本对齐 的值。

默认情况下，位置对齐 设置为 auto。

一个 WebVTT 提示 有一个 计算位置对齐，其值由下述算法返回，该算法以提示的其他方面为参数：

  1. 如果 WebVTT 提示位置对齐 不是 auto，则返回该 位置对齐 的值并中止这些步骤。

  2. 如果 提示文本对齐 为 left，则返回 line-left 并中止这些步骤。

  3. 如果 提示文本对齐 为 right，则返回 line-right 并中止这些步骤。

  4. 如果 提示文本对齐 为 start，则如果该行的基方向为从左到右返回 line-left，否则返回 line-right。

  5. 如果 提示文本对齐 为 end，则如果该行的基方向为从左到右返回 line-right，否则返回 line-left。

  6. 否则，返回 center。

由于 position 总是从视频的左侧（对于 水平 提示）或顶部（否则）进行测量，位置对齐 的 line-left 值在水平和垂直提示中分别对应左侧与顶部。

大小（size）

一个数值，表示 提示盒 的大小，以百分比解释，参照 书写方向。

默认情况下，WebVTT 提示大小 设置为 100%。

如果 书写方向 为 水平，则 size 的百分比相对于视频宽度解释，否则相对于视频高度解释。

文本对齐（text alignment）

用于提示盒内所有文本行在书写方向维度上的对齐方式，取值之一：

开始对齐（Start）
每行的文本分别向盒子的开始侧对齐，该行的开始侧由 CSS 关于 plaintext 值的 unicode-bidi 属性规则决定。[CSS-WRITING-MODES-3]
居中对齐（Center）
文本在盒子的开始和结束侧之间居中对齐。
结束对齐（End）
每行文本分别向盒子的结束侧对齐，该行的结束侧由 CSS 中关于 plaintext 值的 unicode-bidi 属性规则决定。[CSS-WRITING-MODES-3]
左对齐（Left）
文本向盒子的左侧对齐（对于 水平 提示）或向顶部对齐（否则）。
右对齐（Right）
文本向盒子的右侧对齐（对于 水平 提示）或向底部对齐（否则）。

默认情况下，文本对齐 设置为 center。

每行的基方向（用于 Unicode 双向算法确定字符显示顺序）是通过查找该行中的第一个强方向字符并使用 CSS 的 plaintext 算法来确定的。在极少数情况下，如果某行的第一个强字符会导致错误的基方向，作者可以在该行开头使用 U+200E LEFT-TO-RIGHT MARK 或 U+200F RIGHT-TO-LEFT MARK 字符来修正。（参见 [BIDI]）

在此示例中，第二条提示将具有从右到左的基方向，渲染为 ".I think ,يلاع"。（注意下面的文本在显示时全部为从左到右；文本编辑器的渲染可能不同。）

WEBVTT

00:00:07.000 --> 00:00:09.000
What was his name again?

00:00:09.000 --> 00:00:11.000
عالي, I think.

要将该行改为从左到右的基方向，可在行首插入 U+200E LEFT-TO-RIGHT MARK（可转义为 "&lrm;"）。

当行内某些嵌入文本的基方向需要与周围文本不同，可使用成对的 Unicode 双向格式化控制字符来实现。

在此示例中，假设没有使用双向格式化控制字符，提示文本将被渲染为 "I’ve read the book 3 דנליונ times!"（即数字 "3" 位于书名的错误一侧），这是 Unicode 双向算法的效果。（同样，下面文本显示为从左到右。）

WEBVTT

00:00:04.000 --> 00:00:08.000
I’ve read the book נוילנד 3 times!

如果在书名之前放置 U+2068 FIRST STRONG ISOLATE (FSI) 字符，书名之后放置 U+2069 POP DIRECTIONAL ISOLATE (PDI) 字符，则渲染会变为预期的 "I’ve read the book דנליונ 3 times!"。（这些字符可转义为 "&#x2068;" 和 "&#x2069;"。）

默认文本对齐为 center，与提示文本的基方向无关。若希望每行的文本对齐与该行的基方向一致（例如英文为左对齐，希伯来文为右对齐），请使用 start 对齐，或使用 end 以获得相反对齐。

在此示例中使用了 start 对齐。第一行因基方向为从左到右而左对齐，第二行因基方向为从右到左而右对齐。 

WEBVTT

00:00:00.000 --> 00:00:05.000 align:start
Hello!
שלום!

渲染如下：

Hello!
                                            !םולש

左对齐 和 右对齐 可用于无视行基方向而将提示文本左对齐或右对齐。

区域（region）

提示可选择属于的 WebVTT 区域。

默认情况下，区域 值为 null。

与 更新文本轨道渲染的规则 相关联的 WebVTT 提示 的规则是 更新 WebVTT 文本轨道显示的规则。

当一个 WebVTT 提示（其 active flag 已设置） 的 书写方向、snap-to-lines 标志、行（line）、 行对齐、位置（position）、位置对齐、大小（size）、文本对齐、区域（region）或 文本 的值发生变化时，用户代理必须清空 文本轨道提示显示状态，然后立即运行该 文本轨道 的 更新 WebVTT 文本轨道显示的规则。

3.4. WebVTT 字幕或说明区域

A WebVTT region 表示视频视口的一个子区域，并为 WebVTT 字幕或说明提示 提供一个有限的渲染区域。

区域提供了将字幕或说明提示分组的手段，从而可以将提示一同渲染，这在向上滚动时尤为重要。

每个 WebVTT region 由下列内容组成：

标识符

任意长度的字符串，但不能包含 U+0020 SPACE 或 U+0009 CHARACTER TABULATION（制表符）。该字符串不得包含子串 "-->"（U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN）。默认为空字符串。

宽度（width）

一个数值，表示渲染包含提示的每行文本的盒子的宽度，按视频宽度的百分比解释。默认值为 100。

行数（lines）

一个数值，表示渲染包含提示的每行文本的盒子可容纳的行数。默认值为 3。

由于 WebVTT 区域定义了一个固定的渲染区域，超出该区域允许行数的提示将被裁剪。对于滚动区域，裁剪发生在顶部；对于非滚动区域，裁剪发生在底部。

区域锚点（region anchor point）

两个数值，给出区域内的 x 和 y 坐标，该锚点锚定到视频视口，并在例如字体大小变化导致区域位置变化时仍保持固定位置。默认值为 (0,100)，即区域的左下角。

区域视口锚点（region viewport anchor point）

两个数值，给出视频视口内的 x 和 y 坐标，区域的锚点将锚定到这些坐标。默认值为 (0,100)，即视频视口的左下角。

滚动（scroll）

下列选项之一：

None
表示区域内的提示不滚动，而是固定在首次绘制的位置。
Up
表示区域内的提示将从区域底部添加，并把已显示的提示向上推进，直到新提示的所有行在区域内可见为止。

下图说明了区域锚定到视频视口的工作方式。黑色十字为锚点，橙色表示锚点在区域内的偏移，绿色表示锚点在视频视口内的偏移。可以把它想象成将便签针穿过便签钉在板子上的方式：

visual explanation of WebVTT regions
图片说明：在视频视口内，有一个 WebVTT 区域。区域内有一个用黑色十字标记的锚点。从视频视口边缘到锚点的垂直和水平距离用绿色箭头标示，表示区域视口锚点的 X 和 Y 偏移。从区域边缘到锚点的垂直和水平距离用橙色箭头标示，表示区域锚点的 X 和 Y 偏移。区域的大小由水平轴上的 region width 和垂直轴上的 region lines 表示。

用于解析时，我们还需要下列项：

文本轨道的区域列表（text track list of regions）

由零个或多个 WebVTT regions 组成的列表。

3.5. WebVTT 章节提示

A WebVTT chapter cue 是一个 WebVTT 提示，其 提示文本 被解释为描述章节作为导航目标的章节标题。

章节提示将音频或视频文件的时间线标记为连续、不重叠的区间。还可以将这些区间细分为子章节，从而构建导航树。

3.6. WebVTT 元数据提示

A WebVTT metadata cue 是一个 WebVTT 提示，其 提示文本 被解释为时间对齐的元数据。

4. 语法

4.1. WebVTT 文件结构

A WebVTT file 必须由一个 WebVTT 文件主体 组成，使用 UTF-8 编码并标记为 MIME 类型 text/vtt。[RFC3629]

A WebVTT file body 由下列组件按如下顺序组成：

  1. 一个可选的 U+FEFF 字节顺序标记 (BOM) 字符。
  2. 字符串 "WEBVTT"。
  3. 可选的一个 U+0020 SPACE 字符或 U+0009 CHARACTER TABULATION（制表符）字符，随后是任意数量的非 U+000A LINE FEED (LF) 或 U+000D CARRIAGE RETURN (CR) 的字符。
  4. 两个或更多个 WebVTT 行终止符，用于终止包含文件魔术字的行并将其与主体的其余部分分隔开。
  5. 零个或多个 WebVTT 区域定义块、WebVTT 样式块 和 WebVTT 注释块，它们之间由一个或多个 WebVTT 行终止符 分隔。
  6. 零个或多个 WebVTT 行终止符。
  7. 零个或多个 WebVTT 提示块 和 WebVTT 注释块，它们之间由一个或多个 WebVTT 行终止符 分隔。
  8. 零个或多个 WebVTT 行终止符。

A WebVTT 行终止符 包含下列之一：

A WebVTT 区域定义块 包含下列组件，按给定顺序：

  1. 字符串 "REGION"（U+0052 LATIN CAPITAL LETTER R, U+0045 LATIN CAPITAL LETTER E, U+0047 LATIN CAPITAL LETTER G, U+0049 LATIN CAPITAL LETTER I, U+004F LATIN CAPITAL LETTER O, U+004E LATIN CAPITAL LETTER N）。
  2. 零个或多个 U+0020 SPACE 字符或 U+0009 CHARACTER TABULATION（制表符）字符。
  3. 一个 WebVTT 行终止符。
  4. 一个 WebVTT 区域设置列表。
  5. 一个 WebVTT 行终止符。

A WebVTT 样式块 包含下列组件，按给定顺序：

  1. 字符串 "STYLE"（U+0053 LATIN CAPITAL LETTER S, U+0054 LATIN CAPITAL LETTER T, U+0059 LATIN CAPITAL LETTER Y, U+004C LATIN CAPITAL LETTER L, U+0045 LATIN CAPITAL LETTER E）。
  2. 零个或多个 U+0020 SPACE 字符或 U+0009 CHARACTER TABULATION（制表符）字符。
  3. 一个 WebVTT 行终止符。
  4. 任何不包含 U+000A LINE FEED (LF) 和 U+000D CARRIAGE RETURN (CR) 的字符序列（每两个序列间可由一个 WebVTT 行终止符 分隔），但整个字符串不得包含子串 "-->"。该字符串代表一个 CSS 样式表；应遵守相关 CSS 规范中的要求。 [CSS22]
  5. 一个 WebVTT 行终止符。

A WebVTT 提示块 包含下列组件，按给定顺序：

  1. 可选的一个 WebVTT 提示标识符，随后是一个 WebVTT 行终止符。
  2. WebVTT 提示时序。
  3. 可选的一个或多个 U+0020 SPACE 字符或 U+0009 CHARACTER TABULATION（制表符）字符，随后是一个 WebVTT 提示设置列表。
  4. 一个 WebVTT 行终止符。
  5. 提示载荷（cue payload）： 要么是 WebVTT 字幕或说明提示文本，要么是 WebVTT 章节标题文本，要么是 WebVTT 元数据文本，但其不得包含子串 "-->"。
  6. 一个 WebVTT 行终止符。

一个 WebVTT 提示块 对应于 WebVTT 文件中的一条时间对齐的文本或数据，例如一条字幕。提示载荷 即该提示关联的文本或数据。

A WebVTT 提示标识符 是任意一个或多个字符的序列，但不得包含子串 "-->"，且不得包含 U+000A LINE FEED (LF) 或 U+000D CARRIAGE RETURN (CR) 字符。

一个 WebVTT 提示标识符 必须在该 WebVTT 文件 的所有 WebVTT 提示标识符 中唯一。

一个 WebVTT 提示标识符 可用于引用特定提示，例如从脚本或 CSS 中引用。

部分 WebVTT 提示时序 的 WebVTT 提示块 包含下列组件，按给定顺序：

  1. 一个 WebVTT 时间戳，表示提示的开始时间偏移。该时间必须大于或等于文件中所有先前提示的开始时间偏移。
  2. 一个或多个 U+0020 SPACE 字符或 U+0009 CHARACTER TABULATION（制表符）字符。
  3. 字符串 "-->"（U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN）。
  4. 一个或多个 U+0020 SPACE 字符或 U+0009 CHARACTER TABULATION（制表符）字符。
  5. 一个 WebVTT 时间戳，表示提示的结束时间偏移。该时间必须大于该提示的开始时间偏移。

WebVTT 提示时序 给出了 WebVTT 提示块 的开始和结束偏移。不同提示可以重叠。提示总是按其开始时间排序列出。

A WebVTT 时间戳 由下列组件按给定顺序组成：

  1. 可选（如果 hours 非零则必须）：
    1. 两个或更多个 ASCII 数字，表示以十进制整数的 hours。
    2. 一个 U+003A 冒号字符 (:)
  2. 两位 ASCII 数字，表示以十进制整数的 minutes，范围为 0 ≤ minutes ≤ 59。
  3. 一个 U+003A 冒号字符 (:)
  4. 两位 ASCII 数字，表示以十进制整数的 seconds，范围为 0 ≤ seconds ≤ 59。
  5. 一个 U+002E 句点字符 (.).
  6. 三位 ASCII 数字，表示秒的小数千分位 seconds-frac，作为十进制整数。

一个 WebVTT 时间戳 总是相对于要与之同步的媒体数据的 当前播放位置 来解释。

A WebVTT 提示设置列表 由零个或多个 WebVTT 提示设置 组成，顺序任意，它们之间由一个或多个 U+0020 SPACE 字符或 U+0009 TAB 分隔。每个设置按给定顺序包含：

  1. 一个 WebVTT 提示设置名称。
  2. 一个可选的 U+003A 冒号 (:) 字符。
  3. 一个可选的 WebVTT 提示设置值。

A WebVTT 提示设置名称 和 WebVTT 提示设置值 均由一个或多个非 U+000A LINE FEED (LF) 和非 U+000D CARRIAGE RETURN (CR) 字符组成，但整个字符串不得包含子串 "-->"。

A WebVTT 百分比（percentage） 由下列组件组成：

  1. 一个或多个 ASCII 数字。
  2. 可选：
    1. 一个 U+002E 点字符 (.).
    2. 一个或多个 ASCII 数字。
  3. 一个 U+0025 百分号字符 (%)。

当作为数值解释时，WebVTT 百分比 必须在 0..100 范围内。

A WebVTT 注释块 包含下列组件，按给定顺序：

  1. 字符串 "NOTE"。
  2. 可选地，以下组件按给定顺序：
    1. 下列其一：
    2. 任何不包含 U+000A LINE FEED (LF) 和 U+000D CARRIAGE RETURN (CR) 的字符序列（每两序列间可由一个 WebVTT 行终止符 分隔），但整个字符串不得包含子串 "-->"。
  3. 一个 WebVTT 行终止符。

解析器会忽略 WebVTT 注释块。

4.2. WebVTT 提示载荷的类型

4.2.1. WebVTT 元数据文本

WebVTT 元数据文本 由任意不包含 U+000A LINE FEED (LF) 和 U+000D CARRIAGE RETURN (CR) 的字符序列组成（各序列之间可由 WebVTT 行终止符 分隔）。换言之，任何不具有连续两个 WebVTT 行终止符 且不以或不以 WebVTT 行终止符 开头或结尾的文本。

WebVTT 元数据文本 提示仅对脚本化应用有用（例如在 HTML 的 text track kind 中使用 metadata）。

4.2.2. WebVTT 字幕或说明提示文本

WebVTT 字幕或说明提示文本 是由零个或多个 WebVTT 字幕或说明提示组件 组成的 提示载荷，顺序任意，各组件之间可由 WebVTT 行终止符 分隔。

WebVTT 字幕或说明提示组件 包括：

除 HTML 字符引用外，所有 WebVTT 字幕或说明提示组件 均可通过在提示组件起始标签与组件类名之间使用点号（'.'）记法附加一个或多个 提示组件类名。类名必须紧跟在“点”之后。

WebVTT 提示内部文本 由一个可选的 WebVTT 行终止符 起始，随后是零个或多个 WebVTT 字幕或说明提示组件（顺序任意），各组件后可选跟随一个 WebVTT 行终止符。

A WebVTT 提示类 span 由一个不允许注释的 WebVTT 提示 span 起始标签 "c"、表示提示文本的 WebVTT 提示内部文本 和 一个结束标签 "c" 组成。

A WebVTT 斜体 span 由一个不允许注释的 WebVTT 提示 span 起始标签 "i"、表示斜体文本的 WebVTT 提示内部文本 和 一个结束标签 "i" 组成。

A WebVTT 粗体 span 由一个不允许注释的 WebVTT 提示 span 起始标签 "b"、表示粗体文本的 WebVTT 提示内部文本 和 一个结束标签 "b" 组成。

A WebVTT 下划线 span 由一个不允许注释的 WebVTT 提示 span 起始标签 "u"、表示下划线文本的 WebVTT 提示内部文本 和 一个结束标签 "u" 组成。

A WebVTT ruby span 由下列组件按给定顺序组成：

  1. 一个不允许注释的 WebVTT 提示 span 起始标签 "ruby"。
  2. 一次或多次出现下列组件组，顺序如下：
    1. WebVTT 提示内部文本，表示 ruby 基文本。
    2. 一个不允许注释的 WebVTT 提示 span 起始标签 "rt"。
    3. 一个 WebVTT ruby 文本 span：WebVTT 提示内部文本，表示 ruby 注释的 ruby 文本部分。
    4. 一个 WebVTT 提示 span 结束标签 "rt"。如果这是该 WebVTT ruby span 中该组组件的最后一次出现，则最后的结束标签可以省略。
  3. 如果最后的结束标签未被省略：可选的一个 WebVTT 行终止符。
  4. 如果最后的结束标签未被省略：零个或多个 U+0020 SPACE 字符或 U+0009 TAB 字符，每个之后可选跟随一个 WebVTT 行终止符。
  5. 一个 WebVTT 提示 span 结束标签 "ruby"。

提示定位控制的是基线文本的位置，而不是 ruby 文本的位置。

WebVTT 中的 ruby 是 HTML ruby 功能的一个子集。将来可能扩展以支持用于 ruby 基文本的对象以及复杂 ruby，当这些特性在 HTML 和 CSS 中更加成熟时。[HTML51] [CSS3-RUBY]

A WebVTT 语音 span 由下列组件按给定顺序组成：

  1. 一个要求注释的不允许省略注释的 WebVTT 提示 span 起始标签 "v"；该注释表示语音名称。
  2. WebVTT 提示内部文本。
  3. 一个 WebVTT 提示 span 结束标签 "v"。如果该 WebVTT 语音 span 是其所属 组件 列表中的唯一 WebVTT 字幕或说明提示文本 组件，则该结束标签可为简略省略。

A WebVTT 语言 span 由下列组件按给定顺序组成：

  1. 一个要求注释的 WebVTT 提示 span 起始标签 "lang"；该注释表示随后组件的语言，且必须为有效的 BCP 47 语言标签。 [BCP47]
  2. WebVTT 提示内部文本。
  3. 一个 WebVTT 提示 span 结束标签 "lang"。

上述关于有效 BCP 47 语言标签的要求是一个创作（authoring）要求，因此一致性检查器会校验语言标签的有效性，但其他用户代理不会进行该校验。

A WebVTT 提示 span 起始标签 具有一个 tag name 并且要么要求注释要么禁止注释，其由下列组件按给定顺序组成：

  1. 一个 U+003C LESS-THAN SIGN 字符 (<)。
  2. 该 tag name。
  3. 零次或多次出现以下序列：
    1. U+002E FULL STOP 字符 (.)
    2. 一个或多个字符（不能是 U+0009 制表符、U+000A 换行、U+000D 回车、U+0020 空格、U+0026 &、U+003C <、U+003E >、或 U+002E .），表示描述该提示 span 含义的类名。

  4. 如果起始标签要求注释：一个 U+0020 空格或 U+0009 制表符，随后一个或多个下列组件，其拼接后必须至少包含一个非空格或非制表符字符：

  5. 一个 U+003E GREATER-THAN SIGN 字符 (>)。

A WebVTT 提示 span 结束标签 具有一个 tag name，其由下列组件按给定顺序组成：

  1. 一个 U+003C LESS-THAN SIGN 字符 (<)。
  2. U+002F SOLIDUS 字符 (/).
  3. 该 tag name。
  4. 一个 U+003E GREATER-THAN SIGN 字符 (>)。

A WebVTT 提示时间戳 由一个 U+003C LESS-THAN SIGN 字符 (<)、随后一个表示该点在提示中何时变为活动的 WebVTT 时间戳，然后是一个 U+003E GREATER-THAN SIGN 字符 (>) 组成。该时间必须大于提示中任何先前 WebVTT 提示时间戳 所表示的时间，也必须大于提示的开始时间偏移，并且小于提示的结束时间偏移。

A WebVTT 提示文本 span 由一个或多个字符组成，这些字符不得为 U+000A 换行、U+000D 回车、U+0026 &、或 U+003C <。

WebVTT 提示 span 起始标签注释文本 由一个或多个字符组成，这些字符不得为 U+000A 换行、U+000D 回车、U+0026 &、或 U+003E >。

4.2.3. WebVTT 章节标题文本

WebVTT 章节标题文本 是 提示文本，可以使用下列任意数量的组件，组件之间可由 WebVTT 行终止符 分隔：

4.3. WebVTT 区域设置

一个 WebVTT cue 设置列表 可以包含对一个 WebVTT 区域 的引用。要定义一个区域，需要指定一个 WebVTT 区域定义块。

该 WebVTT 区域设置列表 由下面零个或多个组件组成，按任意顺序排列，组件之间用一个或多个 U+0020 SPACE 字符、U+0009 CHARACTER TABULATION（制表符）字符，或 WebVTT 行终止符 分隔，且字符串中不得包含两个连续的 WebVTT 行终止符。每个组件在每个 WebVTT 区域设置列表 字符串中不得出现多于一次。

该 WebVTT 区域设置列表 提供关于区域尺寸、定位和锚点的配置选项。 例如，它允许将区域内的一组 cues 在区域中心和视频视口中心处锚定。在此示例中，当字体增大时，区域将从中心向所有方向均匀扩展。

一个 WebVTT 区域标识符设置 由下列组件按给定顺序组成：

  1. 字符串 "id"。

  2. 一个 U+003A COLON 字符 (:)。

  3. 一个任意的由一个或多个非 ASCII 空白字符 组成的字符串。 该字符串不得包含子字符串 "-->"（U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN）。

每个 WebVTT 区域标识符设置 在同一个 WebVTT 文件 的所有 WebVTT 区域 的 WebVTT 区域标识符设置 中必须唯一。

每个 WebVTT cue 设置列表 中必须包含一个 WebVTT 区域标识符设置。如果没有标识符，就无法在语法上将 WebVTT cue 与 WebVTT 区域 关联起来。

该 WebVTT 区域标识符设置 为区域提供一个名称，以便区域内的 cues 可以引用该名称。

一个 WebVTT 区域宽度设置 由下列组件按给定顺序组成：

  1. 字符串 "width"。

  2. 一个 U+003A COLON 字符 (:)。

  3. 一个 WebVTT 百分比。

该 WebVTT 区域宽度设置 为区域提供了一个固定宽度，表示为视频宽度的百分比， cues 在该区域内呈现并据此计算对齐。

一个 WebVTT 区域行数设置 由下列组件按给定顺序组成：

  1. 字符串 "lines"。

  2. 一个 U+003A COLON 字符 (:)。

  3. 一个或多个 ASCII 数字。

该 WebVTT 区域行数设置 为区域提供一个以行数表示的固定高度， cues 在该区域内呈现。作为如此，它定义了如果该区域为滚动区域时的回滚区域高度。

一个 WebVTT 区域锚点设置 由下列组件按给定顺序组成：

  1. 字符串 "regionanchor"。

  2. 一个 U+003A COLON 字符 (:)。

  3. 一个 WebVTT 百分比。

  4. 一个 U+002C COMMA 字符 (,)。

  5. 一个 WebVTT 百分比。

该 WebVTT 区域锚点设置 提供一对百分比，指定在区域框内被固定位置的点。 第一个百分比衡量 x 维度，第二个百分比衡量 y 维度，均以区域框的左上角为参考。如果未给出 WebVTT 区域锚点设置，锚点默认为 0%, 100%（即左下角）。

一个 WebVTT 区域视口锚点设置 由下列组件按给定顺序组成：

  1. 字符串 "viewportanchor"。

  2. 一个 U+003A COLON 字符 (:)。

  3. 一个 WebVTT 百分比。

  4. 一个 U+002C COMMA 字符 (,)。

  5. 一个 WebVTT 百分比。

该 WebVTT 区域视口锚点设置 提供一对百分比， 指定视频视口内的某一点，该点用于锚定区域锚点。第一个百分比衡量 x 维度，第二个百分比衡量 y 维度，均以视频视口框的左上角为参考。如果未给出区域视口锚点，则默认为 0%, 100%（即左下角）。

对于浏览器，区域映射为相对于视频视口的绝对定位的 CSS 盒子，即存在一个相对定位的盒子表示视频视口，区域相对于它做绝对定位。溢出被隐藏（overflow:hidden）。

一个 WebVTT 区域滚动设置 由下列组件按给定顺序组成：

  1. 字符串 "scroll"。

  2. 一个 U+003A COLON 字符 (:)。

  3. 字符串 "up"。

该 WebVTT 区域滚动设置 指定渲染到区域内的 cues 是否允许从其初始渲染位置移动并回滚，即向视频视口的顶部移动。如果省略滚动设置，cues 不会从其呈现位置移动。

cues 按行逐行添加到区域，位于已有 cue 行的下方。当已渲染的某一行 cue 被移除，且它上方有另一条已渲染的 cue 行时，该 cue 行会移动到其位置，从而向指定方向滚动。如果没有足够的空间添加新的一行 cue，最顶端的一行会被推动到可见区域之外（因此在进入 overflow:hidden 时逐渐不可见）。这最终为新行腾出空间并允许其被添加。

当没有滚动方向时，cue 行会被添加到最靠近区域底部行的空行中。如果没有可用的空行，则替换最旧的一行。

4.4. WebVTT cue 设置

一个 WebVTT cue 设置 是 WebVTT cue 设置列表 的一部分，提供关于 cue 盒子的位置和对齐以及其中文本对齐方式的配置选项。

例如，一组 WebVTT cue 设置可以允许将 cue 盒对齐到左侧，或将其定位在右上角，并在盒内使 cue 文本居中对齐。

当前可出现在 WebVTT cue 设置 中并可能出现在 WebVTT cue 设置列表 的有：

这些设置中的每一项在每个 WebVTT cue 设置列表 中不得出现多于一次。

一个 WebVTT 垂直文本 cue 设置 是一种 WebVTT cue 设置，按给定顺序由下列组件组成：

  1. 字符串 "vertical" 作为 WebVTT cue 设置名称。

  2. 一个 U+003A COLON 字符 (:)。

  3. 下列字符串之一作为 WebVTT cue 设置值："rl"， "lr"。

该 WebVTT 垂直文本 cue 设置 配置 cue 使用垂直文本布局而非水平文本布局。 垂直文本布局有时用于日语等语言。默认是水平布局。

一个 WebVTT 行 cue 设置 由下列组件按给定顺序组成：

  1. 字符串 "line" 作为 WebVTT cue 设置名称。

  2. 一个 U+003A COLON 字符 (:)。

  3. 作为 WebVTT cue 设置值：
    1. 一个偏移值，以下二者之一：
      表示相对于视频视口的特定偏移

      一个 WebVTT 百分比。

      或表示行号
      1. 可选的一个 U+002D HYPHEN-MINUS 字符 (-)。
      2. 一个或多个 ASCII 数字。
    2. 一个可选的对齐值，由下列组件组成：
      1. 一个 U+002C COMMA 字符 (,)。
      2. 下列字符串之一："start"，"center"， "end"

该 WebVTT 行 cue 设置 配置 cue 盒相对于视频视口在与 书写方向 垂直的方向上的偏移。 对于水平 cue，这是自视频视口顶部的垂直偏移；对于垂直 cue，则为水平偏移。偏移是针对 cue 盒的 start 对齐、center 对齐 或 end 对齐 而定 —— 默认为 start。偏移可以用相关书写模式下的视频视口维度的百分比给出，或用行号给出。行号基于 cue 第一行的大小。正行号从视频视口的开始处计数（第一行编号为 0），负行号从视频视口的末尾计数（最后一行编号为 −1）。

一个 WebVTT 位置 cue 设置 由下列组件按给定顺序组成：

  1. 字符串 "position" 作为 WebVTT cue 设置名称。

  2. 一个 U+003A COLON 字符 (:)。

  3. 作为 WebVTT cue 设置值：
    1. 一个位置值，包含：一个 WebVTT 百分比。
    2. 一个可选的对齐值，包含：
      1. 一个 U+002C COMMA 字符 (,)。
      2. 下列字符串之一："line-left"，"center"， "line-right"

该 WebVTT 位置 cue 设置 配置 cue 盒在与 WebVTT 行 cue 设置 垂直的方向上的缩进位置。 对于水平 cue，这是水平位置。cue 的位置以视频视口的百分比给出。定位是针对 cue 盒的 line-left 对齐、center 对齐 或 line-right 对齐 而定，具体取决于 cue 的 计算后的位置对齐，该对齐可被 WebVTT 位置 cue 设置 覆盖。

一个 WebVTT 大小 cue 设置 由下列组件按给定顺序组成：

  1. 字符串 "size" 作为 WebVTT cue 设置名称。

  2. 一个 U+003A COLON 字符 (:)。

  3. 作为 WebVTT cue 设置值：一个 WebVTT 百分比。

该 WebVTT 大小 cue 设置 配置 cue 盒 在与 WebVTT 位置 cue 设置 相同方向上的尺寸。对于水平 cue，这是 cue 盒的宽度。 它以视频视口宽度的百分比给出。

一个 WebVTT 对齐 cue 设置 由下列组件按给定顺序组成：

  1. 字符串 "align" 作为 WebVTT cue 设置名称。

  2. 一个 U+003A COLON 字符 (:)。

  3. 下列字符串之一作为 WebVTT cue 设置值："start"， "center"，"end"，"left"，"right"

该 WebVTT 对齐 cue 设置 配置 cue 中文本的对齐方式。 关键词 "start" 和 "end" 是相对于 cue 文本行的基方向；对于从左到右的英语文本，"start" 表示左对齐。

一个 WebVTT 区域 cue 设置 由下列组件按给定顺序组成：

  1. 字符串 "region" 作为 WebVTT cue 设置名称。

  2. 一个 U+003A COLON 字符 (:)。

  3. 作为 WebVTT cue 设置值：一个 WebVTT 区域标识符。

一个 WebVTT 区域 cue 设置 通过引用区域的标识符将 cue 配置为成为该区域的一部分，除非该 cue 拥有 "vertical"、"line" 或 "size" cue 设置。 如果一个 cue 属于某个区域，则其 "position" 和 "align" 的 cue 设置将应用到 cue 中的行盒，相对于区域盒进行计算，并且 cue 盒的宽度和高度将相对于区域尺寸而非视口尺寸计算。

4.5. cue 序列的属性

4.5.1. 仅使用嵌套 cues 的 WebVTT 文件

如果一个 WebVTT 文件 的所有 cues 都满足以下规则，则称其为 仅使用嵌套 cues 的 WebVTT 文件：

给定任意两个 cues cue1 和 cue2，它们的开始和结束时间偏移分别为 (x1, y1) 和 (x2, y2)，

下面的示例符合该定义：

WEBVTT

00:00.000 --> 01:24.000
Introduction

00:00.000 --> 00:44.000
Topics

00:44.000 --> 01:19.000
Presenters

01:24.000 --> 05:00.000
Scrolling Effects

01:35.000 --> 03:00.000
Achim’s Demo

03:00.000 --> 05:00.000
Timeline Panel

注意你可以将此 WebVTT 文件中的 cues 表示为一棵树结构：

如果文件中有不能以这种方式表示的 cues，则它们不符合 仅使用嵌套 cues 的 WebVTT 文件 的定义。例如：

WEBVTT

00:00.000 --> 01:00.000
The First Minute

00:30.000 --> 01:30.000
The Final Minute

在这个九十秒的示例中，两个 cue 部分重叠，第一个在第二个结束之前结束，第二个在第一个结束之前开始。因此这不是一个 仅使用嵌套 cues 的 WebVTT 文件。

4.6. WebVTT 文件类型

WebVTT 文件的语法定义允许创作包含各种混合 cues 的多种 WebVTT 文件。然而，通常只会创作其中的一小部分 WebVTT 文件类型。

符合性检查器在验证 WebVTT 文件 时，可能会提供限制语法检查以验证这些特定类型的选项。

4.6.1. 使用元数据内容的 WebVTT 文件

A WebVTT 文件，其所有 cues 的 cue payload 都是 WebVTT 元数据文本，称为 使用元数据内容的 WebVTT 文件。

4.6.2. 使用章节标题文本的 WebVTT 文件

A 使用章节标题文本的 WebVTT 文件 是一种 仅使用嵌套 cues 的 WebVTT 文件，其所有 cues 的 cue payload 都是 WebVTT 章节标题文本。

4.6.3. 使用字幕或副标题 cue 文本的 WebVTT 文件

A WebVTT 文件，其所有 cues 的 cue payload 都是 WebVTT 字幕或副标题 cue 文本，称为 使用字幕或副标题 cue 文本的 WebVTT 文件。

5. WebVTT 字幕或副标题 cue 组件的默认类

许多字幕格式都有指定有限子集文本颜色和文本背景颜色的简单方法。因此，WebVTT 规范提供了一组默认的 cue 组件类名，供 WebVTT 字幕或副标题 cue 组件 的作者以标准方式用于标记有颜色的文本和文本背景。

支持 CSS 样式表的用户代理可以通过添加用户代理样式表来实现本节内容。

5.1. 默认文本颜色

具有一个或多个在下表第一列与之匹配的类名的WebVTT 字幕或标题提示组件，必须将其color 属性作为表现性提示设置为该行第二列中的值：

类名 color 值
white rgba(255,255,255,1)
lime rgba(0,255,0,1)
cyan rgba(0,255,255,1)
red rgba(255,0,0,1)
yellow rgba(255,255,0,1)
magenta rgba(255,0,255,1)
blue rgba(0,0,255,1)
black rgba(0,0,0,1)

如果你的背景是字幕，不要混淆：类 lime 的颜色是字幕领域传统上被称为 green 的颜色（例如 608/708）。

不要在默认的深色背景上使用类 blue 和 black，因为它们会导致文本不可读。一般请参考 WCAG 以获取关于颜色对比的指导 [WCAG20]，并确保考虑文本颜色、背景颜色以及视频的颜色。

5.2. 默认文本背景颜色

具有一个或多个在下表第一列与之匹配的类名的WebVTT 字幕或标题提示组件，必须将其background-color 属性作为表现性提示设置为该行第二列中的值：

类名 background 值
bg_white rgba(255,255,255,1)
bg_lime rgba(0,255,0,1)
bg_cyan rgba(0,255,255,1)
bg_red rgba(255,0,0,1)
bg_yellow rgba(255,255,0,1)
bg_magenta rgba(255,0,255,1)
bg_blue rgba(0,0,255,1)
bg_black rgba(0,0,0,1)

类 bg_lime 的颜色是字幕领域传统上被称为 green 的颜色（例如 608/708）。

在确定颜色和背景类的 层叠（cascade） 时，出现顺序决定了类的层叠关系。

下面的示例展示了如何使用这些类。

WEBVTT

02:00.000 --> 02:05.000
<c.yellow.bg_blue>This is yellow text on a blue background</c>

04:00.000 --> 04:05.000
<c.yellow.bg_blue.magenta.bg_black>This is magenta text on a black background</c>

默认类可以被作者更改，例如 ::cue(.yellow) {color:cyan} 会将所有 .yellow 类的文本颜色改为 cyan。

6. 解析

WebVTT 文件解析对于所有类型的 WebVTT 文件都是相同的，包括说明字幕、翻译字幕、章节或元数据。对于章节或元数据文件，大多数步骤将被跳过。

6.1. WebVTT 文件解析

WebVTT 解析器，给定输入字节流、文本轨道提示列表 output，以及一个 CSS 样式表 集合 stylesheets，必须使用 UTF-8 解码 算法对字节流进行解码，然后按照下方的 WebVTT 解析器算法 解析所得字符串。这样会将 WebVTT 提示 添加到 output，并将 CSS 样式表 添加到 stylesheets。[RFC3629]

WebVTT 解析器 的转换和解析步骤通常是异步运行的，输入字节流会在资源下载过程中被增量更新；这种做法称为 增量 WebVTT 解析器。

WebVTT 解析器 在解析提供的字节流之前会校验文件签名。如果流缺少此 WebVTT 文件签名，则解析器将中止。

WebVTT 解析器算法 如下：

  1. 令 input 为待解析字符串，转换为 Unicode 后，执行下述转换：

    • 将所有 U+0000 NULL 字符替换为 U+FFFD 替换字符。

    • 将每一组 U+000D 回车符与 U+000A 换行符（CRLF）字符对替换为一个 U+000A 换行符（LF）字符。

    • 将所有剩余的 U+000D 回车符替换为 U+000A 换行符（LF）字符。

  2. 令 position 为指向 input 的指针，初始指向字符串开头。在增量 WebVTT 解析器中，当本算法（或其他被其调用的算法）移动 position 指针时，用户代理必须在字节流中有足够字符补入 input 后方可移动指针，使得算法不会读取超过 input 末尾的内容。一旦字节流结束，且所有字符已添加到 input，那么在被指示时，position 可以被移动至 input 的结尾之后。

  3. 令 seen cue 为 false。

  4. 若 input 长度小于六，则中止本步骤。文件没有以正确的WebVTT 文件签名开头，因此未被成功处理。

  5. 若 input 恰好为六个字符但不等于 "WEBVTT"，则中止本步骤。文件没有以正确的WebVTT 文件签名开头，因此未被成功处理。

  6. 若 input 长度大于六但前六个字符不是 "WEBVTT"，或第七个字符不是 U+0020 空格、U+0009 制表符或 U+000A 换行符，则中止本步骤。文件没有以正确的WebVTT 文件签名开头，因此未被成功处理。

  7. 收集一串不是 U+000A 换行符（LF）的代码点。

  8. 若 position 超过 input 末尾，则中止本步骤。文件已成功处理，但不包含有用数据，因此没有WebVTT 提示添加到 output。

  9. position 所指字符为 U+000A 换行符（LF）。将 position 移动到 input 的下一个字符。

  10. 若 position 超过 input 末尾，则中止本步骤。文件已成功处理，但不包含有用数据，因此没有WebVTT 提示添加到 output。

  11. Header：若 position 所指字符不是 U+000A 换行符（LF），则以 in header 标志收集一个 WebVTT 块。否则，将 position 移动到 input 的下一个字符。

  12. 收集一串 U+000A 换行符（LF）代码点。

  13. 令 regions 为一个空的文本轨道区域列表。

  14. 块循环：当 position 未超过 input 末尾时：

    1. 收集一个 WebVTT 块，并令 block 为返回值。

    2. 如果 block 是WebVTT 提示，则将 block 添加到文本轨道提示列表 output。

    3. 否则，如果 block 是CSS 样式表，则将 block 添加到 stylesheets。

    4. 否则，如果 block 是WebVTT 区域对象，则将 block 添加到 regions。

    5. 收集一串 U+000A 换行符（LF）代码点。

  15. End：文件结束。中止本步骤。WebVTT 解析器已结束。文件已成功处理。

上述算法提到的 收集一个 WebVTT 块，可选地带有 in header 标志，用户代理必须按下列步骤执行：

  1. 令 input、position、seen cue、regions 与调用这些步骤的算法中的同名变量相同。

  2. 令 line count 为零。

  3. 令 previous position 为 position。

  4. 令 line 为空字符串。

  5. 令 buffer 为空字符串。

  6. 令 seen EOF 为 false。

  7. 令 seen arrow 为 false。

  8. 令 cue 为 null。

  9. 令 stylesheet 为 null。

  10. 令 region 为 null。

  11. 循环：循环执行以下子步骤：

    1. 收集一串非 U+000A 换行符（LF）代码点。若存在，则令 line 为这些字符。

    2. line count 加 1。

    3. 如果 position 超过 input 末尾，令 seen EOF 为 true。否则，position 所指为 U+000A 换行符（LF）；将 position 移动到 input 的下一个字符。

    4. 如果 line 包含三字符子串 "-->"（U+002D 连字符，U+002D 连字符，U+003E 大于号），则执行：

      1. 若未设置 in header，且如下条件成立至少一个：

        • line count 为 1

        • line count 为 2 且 seen arrow 为 false

        ……则执行如下子步骤：

        1. 令 seen arrow 为 true。

        2. 令 previous position 为 position。

        3. 提示（cue）创建：令 cue 为新的WebVTT 提示，并按以下方式初始化：

          1. 令 cue 的提示标识符为 buffer。

          2. 令 cue 的暂停退出标志为 false。

          3. 令 cue 的WebVTT 区域为 null。

          4. 令 cue 的书写方向为 水平。

          5. 令 cue 的自动贴行标志为 true。

          6. 令 cue 的行为 自动。

          7. 令 cue 的行对齐方式为 起始对齐。

          8. 令 cue 的位置为 自动。

          9. 令 cue 的位置对齐方式为 自动。

          10. 令 cue 的大小为 100。

          11. 令 cue 的文本对齐方式为 居中对齐。

          12. 令 cue 的文本为空字符串。

        4. 收集 WebVTT 提示的时间及设置项，从 line 使用 regions 设置 cue。如失败，将 cue 设为 null。否则，令 buffer 为空字符串，seen cue 设为 true。

        否则，令 position 为 previous position 并跳出循环。

    5. 否则，如果 line 为空字符串，则跳出循环。

    6. 否则，执行如下子步骤：

      1. 若未设置 in header 且 line count 为 2，执行如下子步骤：

        1. 如果 seen cue 为 false 且 buffer 以 "STYLE"（U+0053、U+0054、U+0059、U+004C、U+0045）开头，剩余字符（如有）全为ASCII 空白，则执行：

          1. 令 stylesheet 为创建 CSS 样式表的结果，其属性如下：[CSSOM]

            location
            null
            parent CSS style sheet
            null
            owner node
            null
            owner CSS rule
            null
            media
            空字符串
            title
            空字符串
            alternate flag
            未设置
            origin-clean flag
            设定

          2. 令 buffer 为空字符串。

        2. 否则，若 seen cue 为 false 且 buffer 以 "REGION"（U+0052、U+0045、U+0047、U+0049、U+004F、U+004E）开头，剩余字符（如有）全为ASCII 空白，则执行：

          1. 区域创建：令 region 为新的 WebVTT 区域。

          2. 令 region 的标识符为空字符串。

          3. 令 region 的宽度为 100。

          4. 令 region 的行数为 3。

          5. 令 region 的锚点为 (0,100)。

          6. 令 region 的视口锚点为 (0,100)。

          7. 令 region 的滚动值为无。

          8. 令 buffer 为空字符串。

      2. 如 buffer 非空，附加一个 U+000A 换行符（LF）到 buffer。

      3. 附加 line 到 buffer。

      4. 令 previous position 为 position。

    7. 如 seen EOF 为 true，跳出循环。

  12. 如 cue 非空，令 提示文本为 buffer，并返回 cue。

  13. 否则，如 stylesheet 非空，则从 buffer 解析样式表。如返回规则列表，将其作为 stylesheet 的 CSS 规则；否则设规则为空列表。[CSSOM] [CSS-SYNTAX-3] 最后返回 stylesheet。

  14. 否则，如 region 非空，则从 buffer 收集 WebVTT 区域设置并作用于 region，构造一个WebVTT 区域对象返回。

  15. 否则返回 null。

6.2. WebVTT 区域设置解析

当WebVTT 解析器算法要求从字符串 input 为文本轨道 收集 WebVTT 区域设置时，用户代理必须运行以下算法。

WebVTT 区域对象是一个用于表示WebVTT 区域的概念性结构，用作WebVTT 节点对象列表的根节点。此算法返回一个WebVTT 区域对象列表。

  1. 令 settings 为按空格分割 input 的结果。

  2. 对 settings 列表中的每一个 token setting，执行以下子步骤：

    1. 如果 setting 不包含 U+003A 冒号字符 (:)，或 setting 中第一个 U+003A 冒号字符 (:) 位于首字符或末字符，则跳转到标记为 next setting 的步骤。

    2. 令 name 为 setting 中第一个 U+003A 冒号字符 (:) 之前的前导子串（不含冒号）。

    3. 令 value 为 setting 中第一个 U+003A 冒号字符 (:) 之后（不含冒号）的后部子串。

    4. 针对 name 的值，执行适用的子步骤，如下：

      如果 name 与 "id" 区分大小写匹配

      令 region 的标识符为 value。

      否则，如果 name 与 "width" 区分大小写匹配

      如果从 解析一个百分比字符串 value 返回 percentage，则令 region 的WebVTT 区域宽度为 percentage。

      否则，如果 name 与 "lines" 区分大小写匹配

      1. 如果 value 含有除ASCII 数字外的其它字符，则跳转到标记为 next setting 的步骤。

      2. 将 value 解释为整数，令 number 为该值。

      3. 令 region 的WebVTT 区域行数为 number。

      否则，如果 name 与 "regionanchor" 区分大小写匹配

      1. 如果 value 不含 U+002C 逗号字符 ( , )，则跳转到标记为 next setting 的步骤。

      2. 令 anchorX 为 value 中第一个 U+002C 逗号字符之前的前导子串（不含逗号）。

      3. 令 anchorY 为 value 中第一个 U+002C 逗号字符后的后部子串。

      4. 如果解析百分比字符串 anchorX 或 解析百分比字符串 anchorY 未返回 percentage，则跳转到标记为 next setting 的步骤。

      5. 令 region 的WebVTT 区域锚点为由 anchorX 和 anchorY 计算得出的 percentage 元组。

      否则，如果 name 与 "viewportanchor" 区分大小写匹配

      1. 如果 value 不含 U+002C 逗号字符 ( , )，则跳转到标记为 next setting 的步骤。

      2. 令 viewportanchorX 为 value 中第一个 U+002C 逗号字符前的前导子串（不含逗号）。

      3. 令 viewportanchorY 为 value 中第一个 U+002C 逗号字符后的后部子串。

      4. 如解析百分比字符串 viewportanchorX 或 解析百分比字符串 viewportanchorY 未返回 percentage，则跳转到标记为 next setting 的步骤。

      5. 令 region 的WebVTT 区域视口锚点为由 viewportanchorX 和 viewportanchorY 计算得出的 percentage 元组。

      否则，如果 name 与 "scroll" 区分大小写匹配

      1. 如果 value 与字符串 "up" 区分大小写 匹配，则令 region 的滚动值为 up。

    5. Next setting: 继续下一个 setting（如有）。

解析百分比字符串的规则如下。该过程将返回一个 0..100 范围内的数字或无结果。任何步骤如声明“失败”，即算法在该点被中止并返回无结果。

  1. 令 input 为被解析的字符串。

  2. 如 input 不符合WebVTT 百分比的语法，则失败。

  3. 移除 input 的最后一个字符。

  4. 令 percentage 为使用解析浮点数值的规则解析 input 的结果。[HTML51]

  5. 如 percentage 是错误、小于 0 或大于 100，则失败。

  6. 返回 percentage。

6.3. WebVTT cue 时间和设置解析

当前算法提到要收集 WebVTT cue 的时间和设置时，需从字符串 input，结合文本轨道区域列表 regions 和WebVTT cue cue， 用户代理需执行下列算法。

  1. 令 input 为解析的字符串。

  2. 令 position 为指向 input 的指针，初始指向字符串起始。

  3. 跳过空白字符。

  4. 收集 WebVTT 时间戳。如算法失败则中止并返回失败。否则，将结果作为 cue 的开始时间。

  5. 跳过空白字符。

  6. 如 position 处的字符不是 U+002D 连字符（-）则中止步骤并返回失败，否则 position 前进一位。

  7. 如 position 处的字符不是 U+002D 连字符（-）则中止步骤并返回失败，否则 position 前进一位。

  8. 如 position 处的字符不是 U+003E 大于号（>）则中止步骤并返回失败，否则 position 前进一位。

  9. 跳过空白字符。

  10. 收集 WebVTT 时间戳。如算法失败则中止并返回失败。否则，将结果作为 cue 的结束时间。

  11. 令 remainder 为 input 从 position 开始的剩余子串。

  12. 从 remainder 使用 regions 为 cue，解析 WebVTT cue 设置。

用户代理需从字符串 input，结合文本轨道区域列表 regions 和文本轨道 cue cue，解析 WebVTT cue 设置，需执行以下步骤：

  1. 令 settings 为按空格分割 input 的结果。

  2. 对 settings 列表中每个 setting，执行以下子步骤：

    1. 如果 setting 不包含 U+003A 冒号，或第一个冒号位于首末字符，跳到 next setting。

    2. 令 name 为第一个冒号前的前导子串。

    3. 令 value 为第一个冒号后的后部子串。

    4. 针对 name 的值执行以下适用子步骤：

      如 name 区分大小写匹配 "region"

      1. 令 cue 的WebVTT 区域为 regions 中最后一个WebVTT 区域的标识符等于 value 的，如无则为 null。

      如 name 匹配 "vertical"

      1. 如果 value 匹配 "rl"，令 cue 的书写方向为垂直向左增长。

      2. 否则，如 value 匹配 "lr"，则设为书写方向为垂直向右增长。

      3. 如果 cue 的书写方向不是水平，则 cue 的 WebVTT 区域为 null（无垂直区域）。

      如 name 匹配 "line"

      1. 若 value 含有 U+002C 逗号，令 linepos 和 linealign 分别为逗号前后内容，否则 linealign 设 null。

      2. 若 linepos 不含至少一个 ASCII 数字，跳至 next setting。

      3. 若 linepos 最后为 U+0025 百分号（%）

        如解析百分比字符串不失败，将结果赋给 number，否则跳至 next setting。

        否则

        1. 如 linepos 含有除连字符（-）、数字、点（.）以外的其它字符，跳至 next setting。

        2. 如除首字符外还有连字符，跳至 next setting。

        3. 如点字符超过一个，跳至 next setting。

        4. 如点字符前后非数字、点在首尾，跳至 next setting。

        5. 按解析浮点数的规则解析 linepos 得 number。

        6. 如 number 解析出错，跳至 next setting。

      4. 若 linealign 匹配 "start"，cue 的行对齐设为 起始对齐。

      5. 否则，若 linealign 匹配 "center"，行对齐设为居中。

      6. 否则，若 linealign 匹配 "end"，行对齐设为结束对齐。

      7. 否则，若 linealign 非空，跳至 next setting。

      8. 将 cue 的 WebVTT 行设为 number。

      9. 若 linepos 以%结尾，cue 的 snap-to-lines 标志为 false，否则为 true。

      10. 若 cue 的行设定非 auto，区域设为 null。

      如 name 匹配 "position"

      1. 若 value 含有逗号，colpos 和 colalign 分别取逗号前后，否则 colalign 设 null。

      2. 如 解析百分比字符串 colpos 不失败，将结果赋给 number，否则跳至 next setting。

      3. 如 colalign 匹配 "line-left"，对齐设为 line-left。

      4. 否则若匹配 "center"，对齐设为 center。

      5. 否则若匹配 "line-right"，对齐设为 line-right。

      6. 否则若 colalign 非空，跳至 next setting。

      7. 将位置设为 number。

      如 name 匹配 "size"

      1. 如 解析百分比字符串 value 不失败，将结果赋给 number，否则跳至 next setting。

      2. 将 cue size 设为 number。

      3. 如不是 100，区域设为 null。

      如 name 匹配 "align"

      1. 如 value 匹配 "start"，文本对齐设为 start。

      2. 如 value 匹配 "center"，文本对齐设为 center。

      3. 如 value 匹配 "end"，文本对齐设为 end。

      4. 如 value 匹配 "left"，文本对齐设为 left。

      5. 如 value 匹配 "right"，文本对齐设为 right。

    5. Next setting: 继续下一个 token（如有）。

本规范提及用户代理要收集 WebVTT 时间戳时， 用户代理需执行以下步骤：

  1. 令 input 和 position 为上层调用算法中的同名变量。

  2. 令 most significant units 为 分钟。

  3. 如 position 超过 input 末尾，返回错误并中止。

  4. 如 position 指示字符不是ASCII 数字，返回错误并中止。

  5. 收集连续 ASCII 数字为 string。

  6. 将 string 解释为十进制整数，记为 value1。

  7. 如 string 不正好为两位、或 value1 ＞59，most significant units 设为 小时。

  8. 如 position 超过 input 或当前位置不是冒号，则返回错误并中止；否则 position 前进。

  9. 收集连续 ASCII 数字为 string。

  10. 如 string 不是两位，错误并中止。

  11. 十进制 string 得 value2。

  12. 如为小时单位或下字符仍为冒号，则：

    1. 如末尾/字符非冒号，返回错误；否则 position 前进。

    2. 收集连续数字为 string。

    3. 非两位则错误。

    4. 十进制 string 得 value3。

    否则（非小时且不是冒号），value3 赋值 value2，value2 赋 value1，value1 设零。

  13. 如超尾或非点（.），返回错误，否则置前进。

  14. 收集连续 ASCII 数字为 string。

  15. 非三位则错误。

  16. 十进制赋值 value4。

  17. 如 value2 或 value3 超过 59，则错。

  18. 令 result = value1×60×60 + value2×60 + value3 + value4∕1000。

  19. 返回 result。

6.4. WebVTT 提示文本解析规则

WebVTT 节点对象 是一种用于表示提示文本组件的概念性构造，其目的是可以在不引用底层语法的情况下描述处理。

WebVTT 节点对象 大致分为两类：WebVTT 内部节点对象和WebVTT 叶子节点对象。

WebVTT 内部节点对象 是可以包含其它 WebVTT 节点对象 的节点。它们在概念上类似于 HTML 或 DOM 中的元素。WebVTT 内部节点对象 拥有一个有序的子 WebVTT 节点对象 列表。该 WebVTT 内部节点对象 称为这些子节点的 父节点。没有循环关系，所构造的父子关系形成树状结构。WebVTT 内部节点对象 还拥有一个有序的 类名列表，称为其适用类，以及一种语言，称为其适用语言，其解释为 BCP 47 语言标签。[BCP47]

即使不是有效或格式良好的语言标签，用户代理也会将语言标签作为适用语言。[BCP47]

存在几种具体的WebVTT 内部节点对象类型：

WebVTT 节点对象列表

这些用于作为 WebVTT 节点对象 树的根节点。

WebVTT 类对象

这些表示 WebVTT 提示类片段 的文本区段，并用于在不赋予额外语义（如斜体或加粗）的情况下，用适用类注解提示的部分。

WebVTT 斜体对象

这些表示 WebVTT 提示斜体片段 的文本区段。

WebVTT 加粗对象

这些表示 WebVTT 提示加粗片段 的文本区段。

WebVTT 下划线对象

这些表示WebVTT 提示下划线片段 的文本区段。

WebVTT Ruby 对象

这些表示 WebVTT 提示 ruby 片段 的文本区段。

WebVTT Ruby 文本对象

这些表示 WebVTT 提示 ruby 文本片段 的文本区段。

WebVTT 声音对象

这些表示与特定声音相关的文本区段（WebVTT 提示声音片段），WebVTT 字幕或说明性提示文本中使用。WebVTT 声音对象有一个值，即声音的名称。

WebVTT 语言对象

这些表示 WebVTT 提示语言片段 的文本区段，并用于在适用语言可能不同于周围文本的提示部分进行注解，而不赋予更多语义（如斜体或加粗）。

WebVTT 叶子节点对象 为包含数据（如文本）且不能包含子 WebVTT 节点对象 的节点。

有两种具体类型的WebVTT 叶子节点对象：

WebVTT 文本对象

文本片段。WebVTT 文本对象有一个值，即它所代表的文本。

WebVTT 时间戳对象

时间戳。WebVTT 时间戳对象有一个值，即以秒及其小数表示的时间。

WebVTT 提示文本解析规则 包含以下算法。输入为一个字符串 input，假定包含WebVTT 字幕或说明性提示文本，以及一个可选的后备语言language。该算法返回一个WebVTT 节点对象列表。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为 input 的指针，初始指向字符串的起始位置。

  3. 令 result 为 WebVTT 节点对象列表，初始为空。

  4. 令 current 为 WebVTT 内部节点对象 result。

  5. 令 language stack 为语言标签栈，初始为空。

  6. 如果设置了 language，则设置result的适用语言为language，并将language压入language stack。

  7. 循环：如果position已超出input的结尾，则返回result并中止这些步骤。

  8. 令 token 为执行 WebVTT 提示文本分词器的结果。

  9. 根据 token 的类型执行相应步骤：

    如果 token 为字符串

    1. 创建一个值为字符串 token token 的WebVTT 文本对象。

    2. 将新创建的WebVTT 文本对象附加到current。

    如果 token 为开始标签

    对开始标签 token token 的处理方式，取决于其标签名，如下：

    标签名为 "c"

    附加一个 WebVTT 类对象。

    标签名为 "i"

    附加一个WebVTT 斜体对象。

    标签名为 "b"

    附加一个WebVTT 加粗对象。

    标签名为 "u"

    附加一个WebVTT 下划线对象。

    标签名为 "ruby"

    附加一个WebVTT Ruby 对象。

    标签名为 "rt"

    如果current为WebVTT Ruby 对象，则附加一个WebVTT Ruby 文本对象。

    标签名为 "v"

    附加一个WebVTT 声音对象，并将其值设置为 token 的注释字符串，如果没有则为空字符串。

    标签名为 "lang"

    将 token 的注释字符串（如果没有则为空字符串）压入language stack，然后附加一个WebVTT 语言对象。

    其他情况

    忽略该 token。

    上述步骤中提到的附加一个 WebVTT 内部节点对象，具体类型由用户代理根据下列步骤执行：

    1. 创建一个指定具体类型的WebVTT 内部节点对象。

    2. 将新对象的适用类设置为 token 中的类列表，并排除空字符串。

    3. 如果language stack非空，将新对象的适用语言设置为language stack顶部值。

    4. 将新建节点对象附加到current。

    5. 令 current 为新建节点对象。

    如果 token 为结束标签

    如果下列任一情况为真，则令 current 为其父节点：

    否则，如果结束标签 token token 的标签名为 "lang"，且 current 为 WebVTT 语言对象，则令 current 为其父节点，并弹出language stack 顶部。

    否则，如果结束标签 token token 的标签名为 "ruby"，且 current 为 WebVTT Ruby 文本对象，则令 current 为其父节点的父节点。

    否则，忽略该 token。

    如果 token 为时间戳标签

    1. 令 input 为标签值。

    2. 令position为input的指针，初始指向字符串的起始位置。

    3. 收集 WebVTT 时间戳。

    4. 如果该算法未失败，并且此时position指向input末尾（即时间戳后没有其它字符），则创建一个WebVTT 时间戳对象其值为收集到的时间，并将其附加到current。

      否则，忽略该 token。

  10. 跳转到循环步骤。

WebVTT 提示文本分词器 如下。它会生成一个 token，该 token 可能是字符串（其值是一串字符）、开始标签（包含标签名、类列表，以及可选的注释）、结束标签（包含标签名），或时间戳标签（包含标签值）。

  1. 令 input 和 position 与调用这些步骤的算法中同名变量一致。

  2. 令 tokenizer state 为 WebVTT 数据状态。

  3. 令 result 为空字符串。

  4. 令 classes 为空列表。

  5. 循环：如果 position 已超出 input 末尾，则令 c 为文件结尾标记。否则，令 c 为 position 指向的 input 字符。

    文件结尾标记不是 Unicode 字符，用于结束分词过程。

  6. 跳转到 tokenizer state 指定的状态：

    WebVTT 数据状态

    跳转到与 c 的值匹配的条目：

    U+0026 AMPERSAND (&)

    将 tokenizer state 设为 数据状态下的 HTML 字符引用，并跳转到 next 步骤。

    U+003C LESS-THAN SIGN (<)

    如果 result 为空字符串，则将 tokenizer state 设为 WebVTT 标签状态 并跳转到 next 步骤。

    否则，返回值为 result 的字符串 token 并中止这些步骤。

    文件结尾标记

    返回值为 result 的字符串 token 并中止这些步骤。

    其他情况

    将 c 附加到 result，并跳转到 next 步骤。

    数据状态下的 HTML 字符引用

    尝试消耗 HTML 字符引用，不允许额外字符。

    如果未返回任何内容，向 result 附加 U+0026 AMPERSAND 字符（&）。

    否则，将返回的字符 token 的数据追加到 result。

    无论如何，将 tokenizer state 设为 WebVTT 数据状态，并跳转到 next 步骤。

    WebVTT 标签状态

    跳转到与 c 的值匹配的条目：

    U+0009 制表符
    U+000A 换行符
    U+000C 换页符
    U+0020 空格

    将 tokenizer state 设为 WebVTT 开始标签注解状态，并跳转到 next 步骤。

    U+002E 句点 (.)

    将 tokenizer state 设为 WebVTT 开始标签类状态，并跳转到 next 步骤。

    U+002F 斜杠 (/)

    将 tokenizer state 设为 WebVTT 结束标签状态，并跳转到 next 步骤。

    ASCII 数字

    将 result 设为 c，将 tokenizer state 设为 WebVTT 时间戳标签状态，并跳转到 next 步骤。

    U+003E 大于号 (>)

    将 position 前移到 input 下一个字符，然后跳转到下方的“文件结尾标记”条目。

    文件结尾标记

    返回标签名为空、无类和无注释的开始标签，并中止这些步骤。

    其他情况

    将 result 设为 c，将 tokenizer state 设为 WebVTT 开始标签状态，并跳转到 next 步骤。

    WebVTT 开始标签状态

    跳转到与 c 的值匹配的条目：

    U+0009 制表符
    U+000C 换页符
    U+0020 空格

    将 tokenizer state 设为 WebVTT 开始标签注解状态，并跳转到 next 步骤。

    U+000A 换行符

    将 buffer 设为 c，将 tokenizer state 设为 WebVTT 开始标签注解状态，并跳转到 next 步骤。

    U+002E 句点 (.)

    将 tokenizer state 设为 WebVTT 开始标签类状态，并跳转到 next 步骤。

    U+003E 大于号 (>)

    将 position 前移到 input 下一个字符，然后跳转到下方的“文件结尾标记”条目。

    文件结尾标记

    返回标签名为 result，无类和无注释的开始标签，并中止这些步骤。

    其他情况

    将 c 附加到 result，并跳转到 next 步骤。

    WebVTT 开始标签类状态

    跳转到与 c 的值匹配的条目：

    U+0009 制表符
    U+000C 换页符
    U+0020 空格

    向 classes 增加值为 buffer 的项，将 buffer 设为空字符串，将 tokenizer state 设为 WebVTT 开始标签注解状态，并跳转到 next 步骤。

    U+000A 换行符

    向 classes 增加值为 buffer 的项，将 buffer 设为 c，将 tokenizer state 设为 WebVTT 开始标签注解状态，并跳转到 next 步骤。

    U+002E 句点 (.)

    向 classes 增加值为 buffer 的项，将 buffer 设为空字符串，并跳转到 next 步骤。

    U+003E 大于号 (>)

    将 position 前移到 input 下一个字符，然后跳转到下方的“文件结尾标记”条目。

    文件结尾标记

    向 classes 增加值为 buffer 的项，然后返回标签名为 result，类由 classes 指定、无注释的开始标签，并中止这些步骤。

    其他情况

    将 c 附加到 buffer，并跳转到 next 步骤。

    WebVTT 开始标签注解状态

    跳转到与 c 的值匹配的条目：

    U+0026 AMPERSAND (&)

    将 tokenizer state 设为 注解状态下的 HTML 字符引用，并跳转到 next 步骤。

    U+003E 大于号 (>)

    将 position 前移到 input 下一个字符，然后跳转到下方的“文件结尾标记”条目。

    文件结尾标记

    移除 buffer 前后的 ASCII 空白符，并将 buffer 中连续的一个或多个 ASCII 空白符替换为单个 U+0020 空格，再返回标签名为 result，类由 classes 指定，注释为 buffer 的开始标签，并中止这些步骤。

    其他情况

    将 c 附加到 buffer，并跳转到 next 步骤。

    注解状态下的 HTML 字符引用

    尝试消耗 HTML 字符引用，允许的额外字符为 U+003E 大于号（>）。

    如果未返回任何内容，向 buffer 附加 U+0026 AMPERSAND 字符（&）。

    否则，将返回的字符 token 的数据附加到 buffer。

    无论如何，将 tokenizer state 设为 WebVTT 开始标签注解状态，并跳转到 next 步骤。

    WebVTT 结束标签状态

    跳转到与 c 的值匹配的条目：

    U+003E 大于号 (>)

    将 position 前移到 input 下一个字符，然后跳转到下方的“文件结尾标记”条目。

    文件结尾标记

    返回标签名为 result 的结束标签，并中止这些步骤。

    其他情况

    将 c 附加到 result，并跳转到 next 步骤。

    WebVTT 时间戳标签状态

    跳转到与 c 的值匹配的条目：

    U+003E 大于号 (>)

    将 position 前移到 input 下一个字符，然后跳转到下方的“文件结尾标记”条目。

    文件结尾标记

    返回标签名为 result 的时间戳标签，并中止这些步骤。

    其他情况

    将 c 附加到 result，并跳转到 next 步骤。

  7. Next：将 position 前移到 input 的下一个字符。

  8. 跳转到 循环 步骤。

当上述算法要求消耗 HTML 字符引用时，其含义是依据 HTML 中的定义，尝试消耗字符引用。[HTML51]

当 HTML 规范中要求消耗一个字符时，在本上下文中意味着将 position 前移到 input 的下一个字符。当要求退回一个字符时，即将 position 回退到 input 的前一个字符。 "EOF" 等价于本规范中的文件结尾标记。此外，在处理缺失分号时，此上下文并非“作为属性的一部分”。

6.5. WebVTT 提示文本 DOM 构建规则

为了通过 WebVTT 提示 的 getCueAsHTML() 方法从 VTTCue 接口获取内容，需要将其解析为 DocumentFragment。本节描述了具体方法。

要将 WebVTT 节点对象列表 转换为 Document owner 所属的 DOM 树，用户代理必须创建一个与 WebVTT 节点对象 树同构的 DOM 节点树，对应关系如下：

WebVTT 节点对象 DOM 节点
WebVTT 节点对象列表 DocumentFragment 节点。
WebVTT 区域对象 DocumentFragment 节点。
WebVTT 类对象 HTML span 元素。
WebVTT 斜体对象 HTML i 元素。
WebVTT 加粗对象 HTML b 元素。
WebVTT 下划线对象 HTML u 元素。
WebVTT Ruby 对象 HTML ruby 元素。
WebVTT Ruby 文本对象 HTML rt 元素。
WebVTT 声音对象 HTML span 元素，其 title 属性值为 WebVTT 声音对象 的值。
WebVTT 语言对象 HTML span 元素，lang 属性值为 WebVTT 语言对象 的 适用语言。
WebVTT 文本对象 Text 节点，其 data 为 WebVTT 文本对象 的值。
WebVTT 时间戳对象 ProcessingInstruction 节点，其 target 为 "timestamp"，data 为表示 WebVTT 时间戳 的字符串，包括所有可选部分，若 hours 部分小于十则补一个前导零，否则不补零，该值来源于 WebVTT 时间戳对象。

按照上述映射关系创建的 HTML 元素，其 namespaceURI 属性必须设为 HTML 命名空间，使用 HTML 规范定义的合适 IDL 接口；若对应的 WebVTT 内部节点对象 有 适用类，则需设置 class 属性，值为所有类用单个 U+0020 空格拼接的字符串。

所有 DOM 树节点的 ownerDocument 属性都需设为指定的文档 owner。

未在上文描述或依赖于上文描述的特点之外的所有 DOM 节点特性都应保留其初始值。

6.6. WebVTT 提取章节标题规则

WebVTT 提取章节标题规则，针对 WebVTT 提示 cue，如下：

  1. 令 nodes 为对 cue 的 提示文本 应用 WebVTT 提示文本解析规则 得到的 WebVTT 节点对象列表。

  2. 返回 nodes 中每个 WebVTT 文本对象 的值，采用先序深度优先遍历，并排除 WebVTT Ruby 文本对象及其后代。

7. 渲染

本节较为详细地描述了如何在用户代理中可视化渲染 WebVTT 字幕或说明性提示。该处理模型与 HTML 媒体元素紧密相关（CSS 可用）。不支持 CSS 的用户代理应只渲染纯文本，不实现样式和定位特性。不支持完整 HTML CSS 引擎的用户代理应尽可能渲染与有完整 CSS 的用户代理等效的视觉效果。

7.1. 处理模型

WebVTT 文本轨道显示更新规则通过如下步骤渲染 文本轨道，作用对象为媒体元素（特别是video 元素）或其他回放机制。这些规则下的所有 文本轨道 按同一媒体元素或回放机制统一渲染，防止多轨道字幕重叠。调用本算法时可设置后备语言 language。

在 HTML 中，audio 元素没有可视化渲染区域，因此本算法用于 audio 元素时会中止。当作者为音频资源创建 WebVTT 字幕或说明时，应发布在 video 元素中以便用户代理渲染。

以下步骤的输出是一组覆盖媒体元素或回放区域渲染区的 CSS 盒，用户代理应按适合用户的方式进行渲染。

规则如下：

  1. 如果媒体元素是audio元素或其他无渲染区域的回放机制，终止流程。

  2. 令 video 为当前的媒体元素或回放机制。

  3. 令 output 为一个绝对定位 CSS 块盒的空列表。

  4. 如果用户代理为 video 暴露用户界面，则在 output 添加一个或多个完全透明且定位的 CSS 块盒，覆盖与用户界面区域相同范围。

  5. 如果上次运行本规则时用户代理未为 video 暴露用户界面，但现在已暴露，则可以选设 reset 为 true。否则设为 false。

  6. 令 tracks 为 video 的 文本轨道列表中，文本轨道渲染更新规则为本WebVTT 文本轨道显示更新规则，且文本轨道模式为showing的子集。

  7. 令 cues 为空文本轨道提示列表。

  8. 对 tracks 中每个 track，将其提示列表中处于活动状态的提示追加到 cues。

  9. 令 regions 为空WebVTT 区域列表。

  10. 对 tracks 中每个 track，将其区域列表中带标识符的区域都追加到 regions。

  11. 如果 reset 为 false，则对 regions 中每个 WebVTT 区域 region，令 regionNode 为 WebVTT 区域对象。

  12. 为每个 regionNode 执行如下步骤：

    1. 为 regionNode 应用 CSS 属性时预备如下变量：

      • regionWidth 为 WebVTT 区域宽度。width 取 regionWidth vw（vw 是 CSS 单位）。

      • lineHeight 为 6vh（vh 是 CSS 单位），regionHeight 为 WebVTT 区域行数。lines 取 lineHeight × regionHeight。

      • viewportAnchorX 为 WebVTT 区域锚点 的 x 分量，regionAnchorX 同理。leftOffset 取 regionAnchorX × width / 100.0。left 取 viewportAnchorX vw 减 leftOffset。

      • viewportAnchorY 为 WebVTT 区域锚点 的 y 分量，regionAnchorY 同理。topOffset 取 regionAnchorY × lines / 100.0。top 取 viewportAnchorY vh 减 topOffset。

    2. 在如下限制下，依据 CSS 规范为 regionNode 应用属性，由此得到相对于初始包含块定位的 CSS 盒 box：

      1. regionNode 无关联样式表（regionNodes 的盒后续通过样式表重新设定样式，见下文）。

      2. 对 regionNode 的属性赋值由下一节定义（该节会用到本算法前面计算的一些变量）。

      3. 视频视口（和初始包含块）即为 video 渲染区域。

    3. 将 CSS 盒 box 添加到 output。

  13. 如果 reset 为 false，则对 cues 中每个 WebVTT 提示 cue：若 cue 的显示状态包含一组 CSS 盒，则：

    • 若 cue 的 WebVTT 提示区域 不为 null，则将这些盒添加到该区域的 box 并自 cues 移除 cue。

    • 否则，将这些盒添加到 output 并自 cues 移除 cue。

  14. 对 cues 中尚未将 CSS 盒加入 output 的每个 WebVTT 提示 cue，按照提示顺序执行以下子步骤：

    1. 令 nodes 为对 cue 的 提示文本 应用 WebVTT 提示文本解析规则（如有指定使用后备语言 language）得到的 WebVTT 节点对象列表。

    2. 如 cue 的 WebVTT 提示区域为 null，则执行：

      1. 应用 WebVTT 提示设置，从 nodes 得到 CSS 盒 boxes

      2. 让 cue 的显示状态为 boxes 的 CSS 盒。

      3. 将 boxes 中的盒添加到 output。

    3. 否则，执行：

      1. 令 region 为 cue 的 WebVTT 提示区域。

      2. 如 region 的 WebVTT 区域滚动 设为 up 且已有一个子元素，则将 region 的 transition-property 设为 top，transition-duration 设为 0.433s。

      3. 令 offset 为 cue 的 计算位置 乘以 region 的 WebVTT 区域宽度 再除以 100（作为区域宽度的百分比）。

      4. 依据 cue 的 计算位置对齐 调整 offset：

        如 计算位置对齐 为 居中对齐

        从 offset 减去 region 的 WebVTT 区域宽度 的一半。

        如 计算位置对齐 为 行右对齐

        从 offset 减去 region 的 WebVTT 区域宽度。

      5. 令 left 为 offset %。

      6. 获取一组相对于初始包含块定位的 CSS 盒，得到 boxes。

      7. 如 boxes 不含行盒，则跳过剩余子步骤，本提示被忽略。

      8. 令 cue 的显示状态为 boxes。

      9. 将 boxes 添加到 region。

      10. 如 boxes 总高小于 region 盒高，则令 diff 为两者高度差的绝对值。将 top 增加 diff 并重新应用到 regionNode。

  15. 返回 output。

用户代理可允许用户覆盖上述算法的提示定位，比如可将提示拖动到 video 上的其他位置，甚至完全拖出 video 区域。

7.2. 处理提示设置

当上述处理算法要求用户代理应用 WebVTT 提示设置以从WebVTT 节点对象列表nodes获取 CSS 盒时，用户代理必须运行如下算法。

  1. 如果WebVTT 提示书写方向为水平，则令writing-mode为"horizontal-tb"。否则，如果WebVTT 提示书写方向为垂直向左增长，则令writing-mode为"vertical-rl"。否则，WebVTT 提示书写方向为垂直向右增长；令writing-mode为"vertical-lr"。

  2. 根据下方列表的相应规则，确定cue的maximum size值：

    如果计算位置对齐为行左对齐

    令maximum size为100减去计算位置。

    如果计算位置对齐为行右对齐

    令maximum size为计算位置。

    如果计算位置对齐为居中且计算位置小于等于50

    令maximum size为计算位置乘以2。

    如果计算位置对齐为居中且计算位置大于50

    令maximum size为(100减去计算位置)再乘以2。

  3. 如果WebVTT 提示大小小于maximum size，则令size为WebVTT 提示大小。否则，令size为maximum size。

  4. 如果WebVTT 提示书写方向为水平，则令width为size vw，height为auto。否则，令width为auto，height为size vh。（这些是下一节用于渲染 CSS 属性的 CSS 值；vw和vh为 CSS 单位。）[CSS-VALUES]

  5. 根据下方列表的相应规则，确定cue的x-position或y-position：

    如果WebVTT 提示书写方向为水平
    如果计算位置对齐为行左对齐

    令x-position为计算位置。

    如果计算位置对齐为居中对齐

    令x-position为计算位置减去size的一半。

    如果计算位置对齐为行右对齐

    令x-position为计算位置减去size。

    如果WebVTT 提示书写方向为垂直向左增长或垂直向右增长
    如果计算位置对齐为行左对齐

    令y-position为计算位置。

    如果计算位置对齐为居中对齐

    令y-position为计算位置减去size的一半。

    如果计算位置对齐为行右对齐

    令y-position为计算位置减去size。

  6. 根据下方列表的相应规则，确定尚未计算的x-position或y-position的值：

    如果WebVTT 提示 snap-to-lines 标志为 false
    如果WebVTT 提示书写方向为水平

    令y-position为计算行。

    如果WebVTT 提示书写方向为垂直向左增长或垂直向右增长

    令x-position为计算行。

    如果WebVTT 提示 snap-to-lines 标志为 true
    如果WebVTT 提示书写方向为水平

    令y-position为0。

    如果WebVTT 提示书写方向为垂直向左增长或垂直向右增长

    令x-position为0。

    这些不是最终位置，仅是用于下方盒尺寸计算的临时位置。

  7. 令left为x-position vw，top为y-position vh。（这些是下一节用于渲染 CSS 属性的 CSS 值；vw和vh为 CSS 单位。）[CSS-VALUES]

  8. 获取一组相对于初始包含块定位的 CSS 盒boxes。

  9. 如果boxes中没有行盒，跳过本cue的余下子步骤。该提示被忽略。

  10. 根据下列相应步骤调整boxes的位置：

    如果cue的WebVTT 提示 snap-to-lines 标志为 true

    本算法中许多步骤取决于WebVTT 提示书写方向。标为“水平”的步骤仅适用于WebVTT 提示书写方向为水平时；标为“垂直”的适用于WebVTT 提示书写方向为垂直向左增长或垂直向右增长；标为“垂直向左增长”仅适用于WebVTT 提示书写方向为垂直向左增长时，标为“垂直向右增长”仅适用于WebVTT 提示书写方向为垂直向右增长时。

    1. 水平：令full dimension为video渲染区高度。

      垂直：令full dimension为video渲染区宽度。

    2. 水平：令step为boxes中首行盒的高度。

      垂直：令step为boxes中首行盒的宽度。

    3. 如果step为零，跳转到done positioning。

    4. 令line为cue的计算行。

    5. 对line加0.5后向下取整，得到整数行。

    6. 垂直向左增长：line加一后取负值。

    7. 令position为step乘以line。

    8. 垂直向左增长：position先减去boxes的外接盒宽度，再加step。

    9. 如line小于零，则position加max dimension且step取负。

    10. 水平：将boxes全部向下移动position距离。

      垂直：将boxes全部向右移动position距离。

    11. 记住boxes当前位置为其specified position。

    12. 令title area为覆盖video渲染区全部的盒。

    13. step loop：如boxes无与output重叠，且全部完全在title area内，则跳转到done positioning。

    14. 水平：如step为负且首行盒顶端超出title area顶，否则step为正且首行盒底端超出title area底，则跳转到switch direction。

      垂直：如step为负且首行盒左端超出title area左，否则step为正且首行盒右端超出title area右，则跳转switch direction。

    15. 水平：所有boxes向下移动step距离（如果step为负，实际向上）。

      垂直：所有boxes向右移动step距离（如果step为负，实际向左）。

    16. 跳转回step loop。

    17. switch direction：如switched为true，则移除boxes，跳转done positioning。

    18. 否则，将boxes移回前面记录的specified position。

    19. 取step负值。

    20. 设switched为true。

    21. 跳转回step loop。

    如果cue的WebVTT 提示 snap-to-lines 标志为 false

    1. 令bounding box为boxes的外接矩形。

    2. 根据下方体情况执行相应步骤：

      如果WebVTT 提示书写方向为水平
      如果WebVTT 提示行对齐为居中对齐

      将所有boxes向上移动bounding box高度一半。

      如果WebVTT 提示行对齐为尾端对齐

      将所有boxes向上移动bounding box高度。

      如果WebVTT 提示书写方向为垂直向左增长或垂直向右增长
      如果WebVTT 提示行对齐为居中对齐

      将所有boxes向左移动bounding box宽度一半。

      如果WebVTT 提示行对齐为尾端对齐

      将所有boxes向左移动bounding box宽度。

    3. 如果boxes无与output重叠且全部在video渲染区内，则跳转done positioning。

    4. 如果存在一种boxes整体移动方式，且内部相对位置不变，这样移动后无一boxes与output重叠，且全部在video渲染区内，则把boxes移动到离当前位置最近的这种位置然后跳转done positioning。如有多个等距离，取最高处，如最高有多个取最左。

    5. 否则，跳转done positioning。（盒会重叠。）

  11. done positioning：返回boxes。

7.3. 获取 CSS 盒

当上述处理算法要求用户代理获取一组 CSS 盒 boxes 时，需在如下约束下对nodes应用 CSS 规范：[CSS22]

令boxes为作为初始包含块后代生成的盒及其位置。

7.4. 为WebVTT 节点对象应用 CSS 属性

在执行WebVTT 文本轨道显示更新规则时，用户代理必须在 CSS user agent cascade 层，按本节规定为WebVTT 节点对象设置相关属性。[CSS22]

用以下 CSS 设置初始化（根）WebVTT 节点对象列表：

变量writing-mode、top、left、width和height值参见WebVTT 文本轨道显示更新规则，以构建 文本的WebVTT 节点对象列表 的对应 WebVTT 提示。

（根）WebVTT 节点对象列表的text-align属性必须设为下表中与提示的WebVTT 提示文本对齐方式值对应的第二格的值：

WebVTT 提示文本对齐方式 text-align 值
起始对齐 start
居中对齐 center
结束对齐 end
左对齐 left
右对齐 right

（根）WebVTT 节点对象列表的font缩写属性必须设为5vh sans-serif。[CSS-VALUES]

（根）WebVTT 节点对象列表的color属性必须设为rgba(255,255,255,1)。[CSS3-COLOR]

WebVTT 提示背景盒和WebVTT Ruby 文本对象的background缩写属性必须设为rgba(0,0,0,0.8)。[CSS3-COLOR]

（根）WebVTT 节点对象列表的white-space属性必须设为pre-line。[CSS22]

WebVTT 斜体对象的font-style属性必须设为italic。

WebVTT 加粗对象的font-weight属性必须设为bold。

WebVTT 下划线对象的text-decoration属性必须设为underline。

WebVTT Ruby 对象的display属性必须设为ruby。[CSS3-RUBY]

WebVTT Ruby 文本对象的display属性必须设为ruby-text。[CSS3-RUBY]

每个WebVTT 区域对象初始化时使用如下 CSS 设置：

变量width、height、top和left的值均取自WebVTT 文本轨道显示更新规则，对应WebVTT 区域构建 WebVTT 区域对象 时所得数值。

每个WebVTT 区域对象的子元素还需初始化如下 CSS 设置：

其它所有非继承属性应设为其初始值；根节点 WebVTT 节点对象列表的继承属性应继承自对应媒体元素，若无媒体元素，则（根）WebVTT 节点对象列表及 WebVTT 区域对象的继承属性应设为初始值。

如有样式表应用于媒体元素或其他回放机制，则应按下节规定解析。

8. CSS 扩展

本节规定了一些 CSS 伪元素和伪类，以及它们如何应用于 WebVTT。本节不适用于不支持 CSS 的用户代理。

8.1. 介绍

本节为非规范性内容。

::cue 伪元素表示一个 cue。

::cue(selector) 伪元素表示匹配指定选择器的 cue 或 cue 内元素。

::cue-region 伪元素表示一个 region。

::cue-region(selector) 伪元素表示匹配指定选择器的 region 或 region 内元素。

与其他所有伪元素类似，这些伪元素不会直接出现在 video 元素的文档树中。

:past 和 :future 伪类可用于 ::cue(selector) 以基于WebVTT 内部节点对象的当前播放位置进行匹配。

下表展示了给定选择器可以选中的内容，以及生成相关对象的 WebVTT 语法示例。

选择器（CSS 语法示例） 匹配对象（WebVTT 语法示例）

::cue

video::cue {
  color: yellow;
}

任意WebVTT 节点对象列表。

WEBVTT

00:00:00.000 --> 00:00:08.000
Yellow!

00:00:08.000 --> 00:00:16.000
Also yellow!

ID 选择器用于 ::cue()

video::cue(#cue1) {
  color: yellow;
}

cue 的文本轨道 cue 标识符匹配所给 ID 的WebVTT 节点对象列表。

WEBVTT

cue1
00:00:00.000 --> 00:00:08.000
Yellow!

类型选择器用于 ::cue()

video::cue(c),
video::cue(i),
video::cue(b),
video::cue(u),
video::cue(ruby),
video::cue(rt),
video::cue(v),
video::cue(lang) {
  color: yellow;
}

指定名称的WebVTT 内部节点对象（除根WebVTT 节点对象列表）。

WEBVTT

00:00:00.000 --> 00:00:08.000
<c>Yellow!</c>
<i>Yellow!</i>
<u>Yellow!</u>
<b>Yellow!</b>
<u>Yellow!</u>
<ruby>Yellow! <rt>Yellow!</rt></ruby>
<v Kathryn>Yellow!</v>
<lang en>Yellow!</lang>

类选择器用于 ::cue()

video::cue(.loud) {
  color: yellow;
}

给定适用类的WebVTT 内部节点对象（除根WebVTT 节点对象列表）。

WEBVTT

00:00:00.000 --> 00:00:08.000
<c.loud>Yellow!</c>
<i.loud>Yellow!</i>
<u.loud>Yellow!</u>
<b.loud>Yellow!</b>
<u.loud>Yellow!</u>
<ruby.loud>Yellow! <rt.loud>Yellow!</rt></ruby>
<v.loud Kathryn>Yellow!</v>
<lang.loud en>Yellow!</lang>

属性选择器用于 ::cue()

video::cue([lang="en-US"]) {
  color: yellow;
}
video::cue(lang[lang="en-GB"]) {
  color: cyan;
}
video::cue(v[voice="Kathryn"] {
  color: lime;
}

针对 "lang"，根WebVTT 节点对象列表或WebVTT 语言对象，其适用语言为指定值；针对 "voice"，其WebVTT 声音对象与指定名称匹配。 

WEBVTT

00:00:00.000 --> 00:00:08.000
Yellow!

00:00:08.000 --> 00:00:16.000
<lang en-GB>Cyan!</lang>

00:00:16.000 --> 00:00:24.000
<v Kathryn>I like lime.</v>

WebVTT 节点对象列表的适用语言可通过 HTML 里的 srclang 属性设置。 

<video ...>
 <track src="example-attr.vtt"
        srclang="en-US" default>
</video>

:lang() 伪类用于 ::cue() 

video::cue(:lang(en)) {
  color: yellow;
}
video::cue(:lang(en-GB)) {
  color: cyan;
}

具有指定适用语言的WebVTT 内部节点对象。

WEBVTT

00:00:00.000 --> 00:00:08.000
Yellow!

00:00:08.000 --> 00:00:16.000
<lang en-GB>Cyan!</lang>

同上，WebVTT 节点对象列表的适用语言可通过 HTML 的 srclang 属性设置。

:past 和 :future 伪类用于 ::cue() 

video::cue(:past) {
  color: yellow;
}
video::cue(:future) {
  color: cyan;
}

在含有WebVTT 时间戳对象 cue 内，根据WebVTT 内部节点对象和当前播放位置的不同进行匹配。 

WEBVTT

00:00:00.000 --> 00:00:08.000
<c>No match (no timestamps)</c>

00:00:08.000 --> 00:00:16.000
No match <00:00:12.000> (no elements)

00:00:16.000 --> 00:00:24.000
<00:00:16.000> <c>This</c>
<00:00:18.000> <c>can</c>
<00:00:20.000> <c>match</c>
<00:00:22.000> <c>:past/:future</c>
<00:00:24.000>

::cue-region

video::cue-region {
  color: yellow;
}

任意 region（WebVTT 区域对象列表）。

WEBVTT

REGION
id:editor-comments
regionanchor:0%,0%
viewportanchor:0%,0%

00:00:00.000 --> 00:00:08.000
No match (normal cue)

00:00:08.000 --> 00:00:16.000 region:editor-comments
Yellow!

ID 选择器用于 ::cue-region()

video::cue-region(#scroll) {
  color: cyan;
}

有指定WebVTT 区域标识符的 region（WebVTT 区域对象列表）。

WEBVTT

REGION
id:editor-comments
width: 40%
regionanchor:0%,100%
viewportanchor:10%,90%

REGION
id:scroll
width: 40%
regionanchor:100%,100%
viewportanchor:90%,90%
scroll:up

00:00:00.000 --> 00:00:08.000
No match (normal cue)

00:00:08.000 --> 00:00:16.000 region:editor-comments
Yellow!

00:00:10.000 --> 00:00:16.000 region:scroll
Over here it’s Cyan!

8.2. 处理模型

当用户代理根据WebVTT 文本轨道显示更新规则渲染一个或多个WebVTT 提示时，渲染所用WebVTT 节点对象列表中的WebVTT 节点对象可被如下定义的某些伪选择器匹配。这些选择器可在 cue 渲染过程中，即使在（仅在活动 cue 集合变化时才运行的）WebVTT 文本轨道显示更新规则应用之间，也能开始或终止匹配单个WebVTT 节点对象。支持下述伪元素的用户代理必须据此动态更新渲染。当white-space或属性对应于font缩写（包括line-height）的属性值发生变化时，WebVTT 提示的显示状态必须清空，且文本轨道的文本轨道渲染更新规则必须立即重新运行。

伪元素适用于被选择器匹配到的元素。本节所指，该元素为匹配元素。以下几节定义的伪元素影响渲染于匹配元素的WebVTT 提示部分的样式。

如匹配元素不是 video 元素， 下文定义的伪元素在本规范下不会产生效果。

实现文本轨道模型的 CSS 用户代理必须实现 ::cue、::cue(selector)、::cue-region 和 ::cue-region(selector) 伪元素，以及 :past 和 :future 伪类。

8.2.1. ::cue 伪元素

::cue 伪元素（无参数）匹配为匹配元素构建的任意WebVTT 节点对象列表，但background 缩写属性必须应用于WebVTT 提示背景盒，而不是节点对象列表。

下列属性适用于无参数 ::cue 伪元素；为伪元素设置的其他属性必须忽略：

::cue(selector) 带参数的伪元素，其参数必须为 CSS 选择器[SELECTORS4]。它匹配为匹配元素构建、且匹配给定 CSS 选择器的任意WebVTT 内部节点对象，其节点处理如下：

下列属性适用于带参数 ::cue() 伪元素：

此外，如果选择器不包含:past和:future伪类，下列属性也适用：

不适用的属性必须被忽略。

作为特例，对应于background缩写的属性，本应用于节点对象列表时，必须改为应用于WebVTT 提示背景盒。

8.2.2. :past 和 :future 伪类

:past 和 :future 伪类有时会匹配WebVTT 节点对象。[SELECTORS4]

:past 伪类仅匹配在过去的WebVTT 节点对象。

对WebVTT 提示的节点对象列表进行先序深度遍历时，若存在值小于当前匹配元素的播放位置且完全位于节点对象c之后的WebVTT 时间戳对象，则c在过去。

:future 伪类仅匹配在未来的WebVTT 节点对象。

对WebVTT 提示的节点对象列表进行先序深度遍历时，若存在值大于当前匹配元素的播放位置且完全位于节点对象c之前的WebVTT 时间戳对象，则c在未来。

8.2.3. ::cue-region 伪元素

伪元素适用于被选择器匹配的元素。本节中，该元素为匹配元素。下文伪元素影响渲染于匹配元素的文本轨道区域的样式。

如匹配元素不是 video 元素，以下定义的伪元素在本规范下不会生效。

::cue-region 伪元素（无参数）匹配为匹配元素构建的任意WebVTT 区域对象列表。

::cue-region(selector) 伪元素带参数时，其参数必须为 CSS 选择器[SELECTORS4]。它匹配为匹配元素构建、且符合如下规则的WebVTT 区域对象列表：

对于 ::cue-region(selector)，没有定义其他选择器匹配行为。

适用于 ::cue 的同一组属性也适用于 ::cue-region 伪元素；伪元素上设置的其他属性必须忽略。

当用户代理根据WebVTT 文本轨道显示更新规则渲染一个或多个文本轨道区域时，渲染所用WebVTT 区域对象可被上述伪元素匹配。支持该伪元素的用户代理必须动态更新渲染。当white-space或对应于font缩写（包括line-height）的属性值发生变化时，该 region 内所有WebVTT 提示的显示状态必须清空，并且文本轨道的文本轨道渲染更新规则必须立即重新运行。

9. API

9.1. VTTCue 接口

以下接口用于在 DOM API 中暴露 WebVTT 提示：

enum AutoKeyword { "auto" };
typedef (double or AutoKeyword) LineAndPositionSetting;
enum DirectionSetting { "" /* horizontal */, "rl", "lr" };
enum LineAlignSetting { "start", "center", "end" };
enum PositionAlignSetting { "line-left", "center", "line-right", "auto" };
enum AlignSetting { "start", "center", "end", "left", "right" };
[Exposed=Window,
 Constructor(double startTime, double endTime, DOMString text)]
interface VTTCue : TextTrackCue {
  attribute VTTRegion? region;
  attribute DirectionSetting vertical;
  attribute boolean snapToLines;
  attribute LineAndPositionSetting line;
  attribute LineAlignSetting lineAlign;
  attribute LineAndPositionSetting position;
  attribute PositionAlignSetting positionAlign;
  attribute double size;
  attribute AlignSetting align;
  attribute DOMString text;
  DocumentFragment getCueAsHTML();
};
cue = new VTTCue( startTime, endTime, text )

返回一个新的 VTTCue 对象，用于 addCue() 方法。

startTime 参数设置 文本轨道提示开始时间。

endTime 参数设置 文本轨道提示结束时间。

text 参数设置 提示文本。

cue . region

返回该提示所属的 VTTRegion 对象（如有），否则为 null。

可赋值。

cue . vertical [ = value ]

返回一个字符串，表示 WebVTT 提示书写方向，如下：

如果为 水平

空字符串。

如果为 竖直向左

字符串 "rl"。

如果为 竖直向右

字符串 "lr"。

可赋值。

cue . snapToLines [ = value ]

如果 WebVTT 提示 snap-to-lines 标志 为 true，则返回 true，否则为 false。

可赋值。

cue . line [ = value ]

返回 WebVTT 提示行。若为 auto，则返回字符串 "auto"。

可赋值。

cue . lineAlign [ = value ]

返回一个字符串，表示 WebVTT 提示行对齐方式，如下：

如果为 起始对齐

字符串 "start"。

如果为 居中对齐

字符串 "center"。

如果为 尾端对齐

字符串 "end"。

可赋值。

cue . position [ = value ]

返回 WebVTT 提示位置。若为 auto，则返回字符串 "auto"。

可赋值。

cue . positionAlign [ = value ]

返回一个字符串，表示 WebVTT 提示位置对齐，如下：

如果为 line-left 对齐

字符串 "line-left"。

如果为 居中对齐

字符串 "center"。

如果为 line-right 对齐

字符串 "line-right"。

如果为 自动对齐

字符串 "auto"。

可赋值。

cue . size [ = value ]

返回 WebVTT 提示大小。

可赋值。

cue . align [ = value ]

返回一个字符串，表示 WebVTT 提示文本对齐，如下：

如果为 起始对齐

字符串 "start"。

如果为 居中对齐

字符串 "center"。

如果为 尾端对齐

字符串 "end"。

如果为 左对齐

字符串 "left"。

如果为 右对齐

字符串 "right"。

可赋值。

cue . text [ = value ]

返回原始未解析的 提示文本。

可赋值。

fragment = cue . getCueAsHTML()

将 提示文本以 DocumentFragment 形式，返回为 HTML 元素和其他 DOM 节点。

VTTCue(startTime, endTime, text) 构造函数被调用时，必须执行以下步骤：

  1. 创建一个新的 WebVTT 提示。令 cue 为该 WebVTT 提示。

  2. 令 cue 的 文本轨道提示开始时间 为 startTime 参数的值，按秒解释。

  3. 令 cue 的 文本轨道提示结束时间 为 endTime 参数的值，按秒解释。

  4. 令 cue 的 提示文本 为 text 参数的值，并令 章节标题提取规则 为 WebVTT 章节标题提取规则。

  5. 令 cue 的 文本轨道提示标识符 为空字符串。

  6. 令 cue 的 文本轨道提示退出暂停标志 为 false。

  7. 令 cue 的 WebVTT 提示区域 为 null。

  8. 令 cue 的 WebVTT 提示书写方向 为 水平。

  9. 令 cue 的 WebVTT 提示 snap-to-lines 标志 为 true。

  10. 令 cue 的 WebVTT 提示行 为 auto。

  11. 令 cue 的 WebVTT 提示行对齐方式 为 起始对齐。

  12. 令 cue 的 WebVTT 提示位置 为 auto。

  13. 令 cue 的 WebVTT 提示位置对齐方式 为 auto。

  14. 令 cue 的 WebVTT 提示大小 为 100。

  15. 令 cue 的 WebVTT 提示文本对齐方式 为 居中对齐。

  16. 返回表示 cue 的 VTTCue 对象。

region 属性在获取时，必须返回所代表的 WebVTT 提示区域 的 VTTRegion 对象（如有）；否则返回 null。设置时，WebVTT 提示区域 必须设为新值。

vertical 属性在获取时，必须返回下表第二列中与提示的 WebVTT 提示书写方向 相对应的字符串：

WebVTT 提示书写方向 vertical 值
水平 ""（空字符串）
竖直向左 "rl"
竖直向右 "lr"

设置时，WebVTT 提示书写方向 必须设为上表第一列与新值大小写精确匹配的相应值。

snapToLines 属性在获取时，若 WebVTT 提示 snap-to-lines 标志 为 true，则返回 true，否则返回 false。设置时，WebVTT 提示 snap-to-lines 标志 必须设为新值。

line 属性在获取时，必须返回该 WebVTT 提示行。特殊值 auto 表示为字符串 "auto"。设置时必须将 WebVTT 提示行 设为新值，如新值是字符串 "auto"，则解释为 auto。

为了能以任意顺序设置 snapToLines 和 line 属性，API 不会在 snapToLines 为 false 且 line 超出 0..100 区间时，或反之，报错。

lineAlign 属性在获取时，返回下表第二列与该 WebVTT 提示行对齐方式 相对应的字符串：

WebVTT 提示行对齐方式 lineAlign 值
起始对齐 "start"
居中对齐 "center"
尾端对齐 "end"

设置时，WebVTT 提示行对齐方式 必须设为上表第一列与新值大小写精确匹配的相应值。

position 属性在获取时，必须返回该 WebVTT 提示位置。特殊值 auto 表示为字符串 "auto"。设置时，如果新值为负或大于 100，必须抛出 IndexSizeError 异常，否则必须将 WebVTT 提示位置 设为新值；如新值为字符串 "auto"，解释为特殊值 auto。

positionAlign 属性在获取时，返回下表第二列与该 WebVTT 提示位置对齐方式 相对应的字符串：

WebVTT 提示位置对齐方式 positionAlign 值
line-left 对齐 "line-left"
居中对齐 "center"
line-right 对齐 "line-right"
自动对齐 "auto"

设置时，WebVTT 提示位置对齐方式 必须设为上表第一列与新值大小写精确匹配的相应值。

size 属性在获取时，必须返回该 WebVTT 提示大小。设置时，如果新值为负或大于100，抛 IndexSizeError 异常，否则将 WebVTT 提示大小 设为新值。

align 属性在获取时，返回下表第二列中与该 WebVTT 提示文本对齐方式 相对应的字符串：

WebVTT 提示文本对齐方式 align 值
起始对齐 "start"
居中对齐 "center"
尾端对齐 "end"
左对齐 "left"
右对齐 "right"

设置时，WebVTT 提示文本对齐方式 必须设为上表第一列与新值大小写精确匹配的相应值。

text 属性在获取时，返回该 提示文本 的原始未解析值。设置时，提示文本 必须设为新值。

getCueAsHTML() 方法必须将 提示文本 按 WebVTT 提示文本解析规则 处理后，再按 WebVTT 提示文本 DOM 构建规则 生成 DocumentFragment，其所属文档为 入口设置对象指明的 责任文档。

getCueAsHTML() 不提供回退语言，因为 DocumentFragment 无法暴露语言信息。

9.2. VTTRegion 接口

以下接口用于在 DOM API 中暴露 WebVTT 区域：

enum ScrollSetting { "" /* none */, "up" };
[Exposed=Window,
 Constructor]
interface VTTRegion {
  attribute DOMString id;
  attribute double width;
  attribute unsigned long lines;
  attribute double regionAnchorX;
  attribute double regionAnchorY;
  attribute double viewportAnchorX;
  attribute double viewportAnchorY;
  attribute ScrollSetting scroll;
};
region = new VTTRegion()

返回一个新的 VTTRegion 对象。

region . id

返回文本轨道区域标识符。可设置。

region . width

返回 WebVTT 区域宽度（视频宽度的百分比）。可设置。如果新值不在 0~100 范围内会抛出 IndexSizeError。

region . lines

返回文本轨道区域高度（以行数计）。可设置。如果新值为负会抛出 IndexSizeError。

region . regionAnchorX

返回 WebVTT 区域锚点 X 偏移（区域宽度的百分比）。可设置。如果新值不在 0~100 范围内会抛出 IndexSizeError。

region . regionAnchorY

返回 WebVTT 区域锚点 Y 偏移（区域高度的百分比）。可设置。如果新值不在 0~100 范围内会抛出 IndexSizeError。

region . viewportAnchorX

返回 WebVTT 区域视口锚点 X 偏移（视频宽度的百分比）。可设置。如果新值不在 0~100 范围内会抛出 IndexSizeError。

region . viewportAnchorY

返回 WebVTT 区域视口锚点 Y 偏移（视频高度的百分比）。可设置。如果新值不在 0~100 范围内会抛出 IndexSizeError。

region . scroll

返回一个表示 WebVTT 区域滚动 的字符串：

如果未设置

空字符串。

如果为 up

字符串 "up"。

可设置。

VTTRegion() 构造函数被调用时，必须执行以下步骤：

  1. 创建一个新的 WebVTT 区域。令 region 为该 WebVTT 区域。

  2. 令 region 的 WebVTT 区域标识符 为空字符串。

  3. 令 region 的 WebVTT 区域宽度 为 100。

  4. 令 region 的 WebVTT 区域行数 为 3。

  5. 令 region 的 文本轨道区域 regionAnchorX 为 0。

  6. 令 region 的 文本轨道区域 regionAnchorY 为 100。

  7. 令 region 的 文本轨道区域 viewportAnchorX 为 0。

  8. 令 region 的 文本轨道区域 viewportAnchorY 为 100。

  9. 令 region 的 WebVTT 区域滚动 为空字符串。

  10. 返回表示 region 的 VTTRegion 对象。

id 属性获取时，返回该 WebVTT 区域标识符。设置时将 WebVTT 区域标识符 设为新值。

width 属性获取时，返回该 WebVTT 区域宽度。设置时，如果新值为负或大于100，则抛出 IndexSizeError 异常，否则将 WebVTT 区域宽度 设为新值。

lines 属性获取时，返回该 WebVTT 区域行数。设置时，将 WebVTT 区域行数 设为新值。

regionAnchorX 属性获取时，返回该 WebVTT 区域锚点 X 偏移。设置时，如果新值为负或大于100，则抛出 IndexSizeError 异常，否则将 WebVTT 区域锚点 X 距离设为新值。

regionAnchorY 属性获取时，返回该 WebVTT 区域锚点 Y 偏移。设置时，如果新值为负或大于100，则抛出 IndexSizeError 异常，否则将 WebVTT 区域锚点 Y 距离设为新值。

viewportAnchorX 属性获取时，返回该 WebVTT 区域视口锚点 X 偏移。设置时，如果新值为负或大于100，则抛出 IndexSizeError 异常，否则将 WebVTT 区域视口锚点 X 距离 设为新值。

viewportAnchorY 属性获取时，返回该 WebVTT 区域视口锚点 Y 偏移。设置时，如果新值为负或大于100，则抛出 IndexSizeError 异常，否则将 WebVTT 区域视口锚点 Y 距离 设为新值。

scroll 属性获取时，返回下表第二列与该 WebVTT 区域滚动 设置对应的字符串：

WebVTT 区域滚动 scroll 值
无 ""（空字符串）
up "up"

设置时，WebVTT 区域滚动 必须设为上表第一列与新值大小写完全相同的那一行的值。

10. IANA 注意事项

10.1. text/vtt

该注册用于社区审查，并将提交 IESG 进行审查、批准并注册至 IANA。

类型名:
text
子类型名:
vtt
必需参数:
无参数
可选参数:
无参数
编码注意事项:
8bit（始终为 UTF-8）
安全性注意事项:

文本轨道文件本身并无直接风险，除非包含敏感信息。但实现时需遵循特定规则处理文本轨道，以确保遵守一定的源限制。如果未正确实现这些规则，可能导致信息泄露、跨站脚本攻击等风险。

互操作性注意事项:

本规范定义了标准和非标准内容的处理规则。

已发布的规范:
本文档为相关规范。
使用此媒体类型的应用:
Web 浏览器及其它视频播放器。
更多信息:
魔数（Magic number）:

所有 WebVTT 文件均以下列字节序列之一开始（其中 "EOF" 表示文件结尾）：

  • EF BB BF 57 45 42 56 54 54 0A
  • EF BB BF 57 45 42 56 54 54 0D
  • EF BB BF 57 45 42 56 54 54 20
  • EF BB BF 57 45 42 56 54 54 09
  • EF BB BF 57 45 42 56 54 54 EOF
  • 57 45 42 56 54 54 0A
  • 57 45 42 56 54 54 0D
  • 57 45 42 56 54 54 20
  • 57 45 42 56 54 54 09
  • 57 45 42 56 54 54 EOF

（可选的 UTF-8 BOM，ASCII 字符串 "WEBVTT"，以及空格、Tab、换行或文件结尾。）

文件扩展名:
"vtt"
Macintosh 文件类型代码:
不推荐为该类型指定任何 Macintosh 文件类型代码。
进一步信息联系邮箱:
Silvia Pfeiffer <silviapfeiffer1@gmail.com>
预期用途:
常用
使用限制:
无使用限制。
作者:
Silvia Pfeiffer <silviapfeiffer1@gmail.com>, Simon Pieters <simonp@opera.com>, Philip Jägenstedt <philipj@opera.com>, Ian Hickson <ian@hixie.ch>
变更控制者:
W3C

片段标识符对 text/vtt 资源无意义。

隐私与安全性注意事项

基于文本的格式安全

和任何基于文本的格式一样，可能会构造出恶意内容，导致缓冲区溢出、数值溢出（如整数字符串溢出字长）等问题。实现者应注意，解析器处理过长行、字段值或编码值时不会导致安全漏洞。

样式相关隐私与安全

WebVTT 可嵌入 CSS 样式表，并在支持 CSS 的用户代理中应用。在这种情况下，应考虑 CSS 的隐私和安全注意事项，仅有以下补充。

该样式表 无法获取任何外部资源，保护隐私非常重要，否则可以通过 WebVTT 文件让第三方获知用户何时观看特定视频以及实际时间点。

用户代理可以提供用户样式表，但此类样式表的存在和类型无法被用户代理中运行的脚本（如浏览器）探测到，因为这些样式表的 CSS 对象模型不对脚本暴露，也无法通过 getComputedStyle() API 获取除 ::before 和 ::after 外的伪元素的计算样式。[CSSOM]

脚本相关安全

WebVTT 不包含也不启用脚本。用户代理必须确保无法执行嵌入在 WebVTT 文件内的脚本。

但可能有人构造和传递一种并非用于展示字幕，而是向脚本系统提供定时输入（“触发器”）的文件。不安全的脚本或脚本系统也可能因此导致安全、隐私等问题；但这问题实为脚本系统本身问题。WebVTT 依靠时间戳提供触发器，恶意文件可能快速输出大量触发，消耗大量资源。

偏好隐私

选择、下载或解释 WebVTT 文件的用户代理，有可能向源服务器透露用户需要字幕及其所偏好的字幕 语言。这是关于用户的一小部分信息。然而，字幕文件的提供和是否下载、使用，实为协议或格式（如 HTML 元素）特性，并不是字幕格式本身的问题。[HTML51]

致谢

感谢 SubRip 社区，尤其是 Zuggy 和 ai4spam，他们开发的 SubRip 软件（SRT 文件格式）成为 WebVTT 文本轨道文件格式的基础。

感谢 Ian Hickson 及众多人员在 HTML 标准上的工作，WebVTT 最初就起源于 HTML 规范。[HTML51]

感谢 Addison Phillips, Alastor Wu, Andreas Tai, Anna Cavender, Anne van Kesteren, Benjamin Schaaf, Brian Quass, Caitlin Potter, Courtney Kennedy, Cyril Concolato, Dae Kim, David Singer, Eric Carlson, fantasai, Frank Olivier, Fredrik Söderquist, Giuseppe Pascale, Glenn Adams, Glenn Maynard, John Foliot, Kyle Huey, Lawrence Forooghian, Loretta Guarino Reid, Ms2ger, Nigel Megitt, Ralph Giles, Richard Ishida, Rick Eyre, Ronny Mennerich, Theresa O’Connor, 和 Victor Cărbune 的宝贵意见。

索引

本规范定义的术语

引用定义的术语

引用文献

规范性引用文献

[BCP47]
A. Phillips; M. Davis. 用于标识语言的标签（Tags for Identifying Languages）。 2009年9月。IETF 最佳现行实践。URL: https://tools.ietf.org/html/bcp47
[BIDI]
Mark Davis; Aharon Lanin; Andrew Glass. Unicode 双向算法（Bidirectional Algorithm）。2017年5月14日。Unicode 标准附录 #9。URL: https://www.unicode.org/reports/tr9/tr9-37.html
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS 框对齐模块第3级（Box Alignment Module Level 3）。 URL: https://www.w3.org/TR/css-align-3/
[CSS-BACKGROUNDS-3]
Bert Bos; Elika Etemad; Brad Kemper. CSS 背景与边框模块第3级（Backgrounds and Borders Module Level 3）。 URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-CASCADE-4]
Elika Etemad; Tab Atkins Jr.. CSS 层叠与继承第4级（Cascading and Inheritance Level 4）。 URL: https://www.w3.org/TR/css-cascade-4/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley. CSS 颜色模块第4级（Color Module Level 4）。 URL: https://www.w3.org/TR/css-color-4/
[CSS-DISPLAY-3]
Elika Etemad. CSS 显示模块第3级（Display Module Level 3）。 URL: https://www.w3.org/TR/css-display-3/
[CSS-FLEXBOX-1]
Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. CSS 弹性盒布局模块第1级（Flexible Box Layout Module Level 1）。 URL: https://www.w3.org/TR/css-flexbox-1/
[CSS-FONTS-3]
John Daggett. CSS 字体模块第3级（Fonts Module Level 3）。 URL: https://www.w3.org/TR/css-fonts-3/
[CSS-FONTS-4]
John Daggett; Myles Maxfield. CSS 字体模块第4级（Fonts Module Level 4）。 URL: https://www.w3.org/TR/css-fonts-4/
[CSS-OVERFLOW-3]
David Baron; Florian Rivoal. CSS 溢出模块第3级（Overflow Module Level 3）。 URL: https://www.w3.org/TR/css-overflow-3/
[CSS-POSITION-3]
Rossen Atanassov; Arron Eicholz. CSS 定位布局模块第3级（Positioned Layout Module Level 3）。 URL: https://www.w3.org/TR/css-position-3/
[CSS-SIZING-3]
Elika Etemad. CSS 内在与外在尺寸模块第3级（Intrinsic & Extrinsic Sizing Module Level 3）。 URL: https://www.w3.org/TR/css-sizing-3/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS 语法模块第3级（Syntax Module Level 3）。 URL: https://www.w3.org/TR/css-syntax-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii. CSS 文本模块第3级（Text Module Level 3）。 URL: https://www.w3.org/TR/css-text-3/
[CSS-TEXT-4]
Elika Etemad; Koji Ishii; Alan Stearns. CSS 文本模块第4级（Text Module Level 4）。 URL: https://www.w3.org/TR/css-text-4/
[CSS-TEXT-DECOR-3]
Elika Etemad; Koji Ishii. CSS 文本装饰模块第3级（Text Decoration Module Level 3）。 URL: https://www.w3.org/TR/css-text-decor-3/
[CSS-TRANSITIONS-1]
David Baron; Dean Jackson; Brian Birtles. CSS 过渡（Transitions）。 URL: https://www.w3.org/TR/css-transitions-1/
[CSS-UI-4]
Florian Rivoal. CSS 基础用户界面模块第4级（Basic User Interface Module Level 4）。URL: https://www.w3.org/TR/css-ui-4/
[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad. CSS 值与单位模块第3级（Values and Units Module Level 3）。 URL: https://www.w3.org/TR/css-values-3/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS 书写模式第3级（Writing Modes Level 3）。 URL: https://www.w3.org/TR/css-writing-modes-3/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS 书写模式第4级（Writing Modes Level 4）。 URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS22]
Bert Bos. 层叠样式表2.2版规范（Cascading Style Sheets Level 2 Revision 2, CSS 2.2）。 URL: https://www.w3.org/TR/CSS22/
[CSS3-COLOR]
Tantek Çelik; Chris Lilley; David Baron. CSS 颜色模块第3级（Color Module Level 3）。 2017年12月5日。CR。URL: https://www.w3.org/TR/css-color-3/
[CSS3-RUBY]
Elika Etemad; Koji Ishii. CSS Ruby 布局模块第1级（Ruby Layout Module Level 1）。 URL: https://www.w3.org/TR/css-ruby-1/
[CSSOM]
Simon Pieters; Glenn Adams. CSS 对象模型（CSSOM）。URL: https://www.w3.org/TR/cssom-1/
[DOM-20151119]
Anne van Kesteren; 等. W3C DOM4。2015年11月19日。REC。URL: https://www.w3.org/TR/2015/REC-dom-20151119/
[ENCODING-CR]
Anne van Kesteren; Joshua Bell; Addison Phillips. 编码（Encoding）。2017年4月13日。CR。URL: https://www.w3.org/TR/2017/CR-encoding-20170413/
[HTML]
Anne van Kesteren; 等. HTML 标准。活标准。URL: https://html.spec.whatwg.org/multipage/
[HTML51]
Steve Faulkner; 等. HTML 5.1 第二版。URL: https://www.w3.org/TR/html51/
[RFC2119]
S. Bradner. RFC中用于表示需求级别的关键词（Key words for use in RFCs to Indicate Requirement Levels）。1997年3月。最佳现行实践。URL: https://tools.ietf.org/html/rfc2119
[RFC3629]
F. Yergeau. UTF-8, ISO 10646 的转换格式。 2003年11月。互联网标准。URL: https://tools.ietf.org/html/rfc3629
[SELECTORS-3]
Tantek Çelik; 等. 选择器第3级（Selectors Level 3）。URL: https://www.w3.org/TR/selectors-3/
[SELECTORS4]
Elika Etemad; Tab Atkins Jr.. 选择器第4级（Selectors Level 4）。URL: https://www.w3.org/TR/selectors-4/
[WebIDL]
Cameron McCormack; Boris Zbarsky; Tobie Langel. Web IDL。URL: https://heycam.github.io/webidl/
[WEBIDL-1]
Cameron McCormack. WebIDL 第1级。URL: https://www.w3.org/TR/2016/REC-WebIDL-1-20161215/

补充性引用文献

[MAUR]
Shane McCarron; Michael Cooper; Mark Sadecki. 媒体可访问性用户需求（Media Accessibility User Requirements）。WD。URL: http://www.w3.org/TR/media-accessibility-reqs/
[WCAG20]
Ben Caldwell; 等. Web 内容可访问性指南（Web Content Accessibility Guidelines, WCAG）2.0。2008年12月11日。REC。URL: https://www.w3.org/TR/WCAG20/

IDL 索引

enum AutoKeyword { "auto" };
typedef (double or AutoKeyword) LineAndPositionSetting;
enum DirectionSetting { "" /* horizontal */, "rl", "lr" };
enum LineAlignSetting { "start", "center", "end" };
enum PositionAlignSetting { "line-left", "center", "line-right", "auto" };
enum AlignSetting { "start", "center", "end", "left", "right" };
[Exposed=Window,
 Constructor(double startTime, double endTime, DOMString text)]
interface VTTCue : TextTrackCue {
  attribute VTTRegion? region;
  attribute DirectionSetting vertical;
  attribute boolean snapToLines;
  attribute LineAndPositionSetting line;
  attribute LineAlignSetting lineAlign;
  attribute LineAndPositionSetting position;
  attribute PositionAlignSetting positionAlign;
  attribute double size;
  attribute AlignSetting align;
  attribute DOMString text;
  DocumentFragment getCueAsHTML();
};

enum ScrollSetting { "" /* none */, "up" };
[Exposed=Window,
 Constructor]
interface VTTRegion {
  attribute DOMString id;
  attribute double width;
  attribute unsigned long lines;
  attribute double regionAnchorX;
  attribute double regionAnchorY;
  attribute double viewportAnchorX;
  attribute double viewportAnchorY;
  attribute ScrollSetting scroll;
};