WebVTT：Web 视频文本轨道格式

W3C 候选推荐草案,

有关本文档的更多详细信息
此版本：
https://www.w3.org/TR/2026/CRD-webvtt1-20260520/
最新发布版本：
https://www.w3.org/TR/webvtt1/
编辑草案：
https://w3c.github.io/webvtt/
先前版本：
历史：
https://www.w3.org/standards/history/webvtt1/
实现报告：
https://www.w3.org/wiki/TimedText/WebVTT_Implementation_Report
测试套件：
https://github.com/web-platform-tests/wpt/tree/master/webvtt
反馈：
GitHub
编辑：
(受邀 专家)
前编辑：
(NICTA CSIRO)
(Opera Software AS)
(Opera Software ASA)
(Google)
参与：
GitHub w3c/webvtt（新议题，开放议题，旧版 开放 bug）
提交：
GitHub w3c/webvtt/commits
@webvtt

Copyright © 2026 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.

摘要

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

本文档状态

本节描述本文档在发布时的状态。 当前 W3C 出版物列表以及本技术报告的最新修订版本可在 W3C 标准和草案索引中找到。

本文档由 W3C 定时文本工作组 作为候选推荐草案发布，并使用推荐标准轨道。 本文档旨在成为 W3C 推荐标准。

如果你希望就本文档发表评论，请将其发送至 public-tt@w3.org （订阅，归档） 并在电子邮件主题开头加上 [webvtt1]。 欢迎所有评论。

作为候选推荐发布并不意味着 W3C 及其成员认可。 候选推荐草案整合了工作组打算 纳入后续候选推荐快照中的、相对于上一候选推荐的变更。 这是一份草案文档，可能随时被其他文档更新、替换或废弃。 除作为进行中的工作外，引用本文档是不合适的。

对于本规范退出 CR 阶段， 每项规范性特性都应满足 定时文本 工作组章程 中提出的要求，以证明充分的实现 经验， 并且需要在实现报告中记录。 工作组不要求实现公开可用，但鼓励其公开。

本文档由一个依据 W3C 专利政策运作的小组生成。 W3C 维护着一个任何 专利披露的公开列表， 这些披露与该小组的交付物相关；该页面还包含披露 专利的说明。 任何实际知悉其认为包含必要权利要求 的专利的个人，都必须依据W3C 专利 政策第 6 节披露相关信息。

本文档受 2025 年 8 月 18 日 W3C 流程文档管辖。

自 WebVTT 首个公开工作草案发布以来， 应用于此版本的所有变更的累积摘要可见于 相对于 FPWD WebVTT 的变更。

1. 介绍

本节是非规范性的。

WebVTT（Web 视频文本 轨道）格式旨在标记与 HTML <track> 元素相关的外部文本 轨道资源。

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

本规范当前版本的大部分内容都用于描述如何将 WebVTT 文件用于说明文字或字幕。关于章节和 时间对齐元数据的信息很少，并且现阶段没有关于视频描述的内容。

在本节中，我们提供一些 WebVTT 文件示例作为介绍。

1.1. 一个简单的说明文字文件

本节是非规范性的。

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

WEBVTT

00:11.000 --> 00:13.000
<v Roger Bingham>We are in New York City

00:13.000 --> 00:16.000
<v Roger Bingham>We're actually at the Lucern Hotel, just down the street

00:16.000 --> 00:18.000
<v Roger Bingham>from the American Museum of Natural History

00:18.000 --> 00:20.000
<v Roger Bingham>And with me is Neil deGrasse Tyson

00:20.000 --> 00:22.000
<v Roger Bingham>Astrophysicist, Director of the Hayden Planetarium

00:22.000 --> 00:24.000
<v Roger Bingham>at the AMNH.

00:24.000 --> 00:26.000
<v Roger Bingham>Thank you for walking down here.

00:27.000 --> 00:30.000
<v Roger Bingham>And I want to do a follow-up on the last conversation we did.

00:30.000 --> 00:31.500 align:right size:50%
<v Roger Bingham>When we e-mailed—

00:30.500 --> 00:32.500 align:left size:50%
<v Neil deGrasse Tyson>Didn't we talk about enough in that conversation?

00:32.000 --> 00:35.500 align:right size:50%
<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos

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

00:35.500 --> 00:38.000
<v Roger Bingham>You know I'm so excited my glasses are falling off here.

可以看到，WebVTT 文件通常由一系列与 时间间隔相关联的文本片段组成，这称为提示（定义）。除了说明文字和字幕之外， WebVTT 还可用于时间对齐元数据，通常用于在提示中传递名称-值对。 WebVTT 还可用于传递章节，这有助于围绕 音频/视频文件进行上下文导航。最后，WebVTT 可用于传递文本形式的视频描述， 这种文本描述时间间隔内的视觉内容，并且可以合成为语音，以帮助 视觉障碍用户理解上下文。

此版本的 WebVTT 重点解决说明文字和字幕用例。 对于其他用例，还可以开展更多规范工作。WebVTT 文件所用于的用例类型 由使用该文件的软件决定。例如，如果通过 <track> 元素与 HTML 文件一起使用，则 kind 属性 定义应如何解释 WebVTT 文件。

以下小节概述了 WebVTT 文件格式的一些关键特性， 特别是用于说明文字和字幕时的特性。

1.2. 带有多行的说明文字提示

本节是非规范性的。

提示中的换行会被保留。如果有必要将提示放入提示宽度内， 用户代理也会插入额外的换行。因此，通常鼓励作者将提示写在 一行上，除非确实需要换行。

以下公益广告视频的说明文字演示了换行：

WEBVTT

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

00:05.000 --> 00:09.000
— It will perforate your stomach.
— You could die.

00:10.000 --> 00:14.000
The Organisation for Sample Public Service Announcements accepts no liability for the content of this advertisement, or for the consequences of any actions taken on the basis of the information provided.

第一个提示很简单，它可能只显示为一行。第二个会占用 两行，每个说话者一行。第三个会换行以适应视频宽度， 可能占用多行。例如，三个提示可能如下所示：

Never drink liquid nitrogen.

        — It will perforate your stomach.
                — You could die.

    The Organisation for Sample Public Service
    Announcements accepts no liability for the
    content of this advertisement, or for the
     consequences of any actions taken on the
        basis of the information provided.

如果提示的宽度更小，前两个提示也可能会换行，如下例所示。 但请注意，第二个提示中的显式换行仍会被保留：

Never drink
    liquid nitrogen.

  — It will perforate
      your stomach.
    — You could die.

  The Organisation for
  Sample Public Service
  Announcements accepts
  no liability for the
     content of this
  advertisement, or for
   the consequences of
  any actions taken on
    the basis of the
  information provided.

还请注意，换行的方式会使各行长度保持均衡。

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
This is a test.

123
00:00.000 --> 00:02.000
That's an, an, that's an L!

crédit de transcription
00:04.000 --> 00:05.000
Transcrit par Célestes™

这允许样式表专门定位这些提示。

/* style for cue: test */
::cue(#test) { color: lime; }

由于 CSS 的语法规则，某些字符需要使用 CSS 字符转义 序列进行转义。例如，以数字 0-9 开头的 ID 需要转义。ID 123 可以表示为 "\31 23"（31 指 "1" 的 Unicode 码点）。有关 CSS 转义的更多信息，请参见 在标记和 CSS 中使用字符转义。 

/* style for cue: 123 */
::cue(#\31 23) { color: lime; }
/* style for cue: crédit de transcription */
::cue(#crédit\ de\ transcription) { color: red; }

此示例展示了如何在元素上使用类，这有助于本地化或 样式的可维护性，并且还展示了如何在提示文本中指示语言变化。

WEBVTT

04:02.500 --> 04:05.000
J'ai commencé le basket à l'âge de 13, 14 ans

04:05.001 --> 04:07.800
Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier

在此示例中，每个提示都使用语音范围说明谁在说话。在第一个提示中， 指定说话者的范围还使用两个类 "first" 和 "loud" 进行了注解。在第三个提示中， 还有一些斜体文本（不与特定说话者相关联）。最后一个提示仅使用 类 "loud" 进行了注解。

WEBVTT

00:00.000 --> 00:02.000
<v.first.loud Esme>It's a blue apple tree!

00:02.000 --> 00:04.000
<v Mary>No way!

00:04.000 --> 00:06.000
<v Esme>Hee!</v> <i>laughter</i>

00:06.000 --> 00:08.000
<v.loud Mary>That's awesome!

请注意，作为特殊例外，如果语音范围覆盖 整个提示文本，则不必闭合。

样式表可以为这些范围设置样式：

::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%
Where did he go?

00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
I think he went down this lane.

00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
What are you waiting for?

由于这些示例中的提示是水平的，"position" 设置指的是 视频视口宽度的百分比。如果文本是垂直的，则 "position" 设置将指 视频视口的高度。

"line-left" 或 "line-right" 只指盒子的物理侧边， "position" 设置会应用到该侧边，并且这种方式不涉及提示的水平或垂直 方向。它不会影响文本本身在盒子内的方向或位置，也不与之相关。

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

第一个提示的提示 盒定位在 10% 标记处。 "position" 设置中的 "line-left" 和 "line-right" 指示位置所指的是提示盒的哪一侧。 由于在此情况下文本是水平的， "line-left" 指盒子的左侧，因此提示盒定位在 视频视口宽度的 10% 和 45% 标记之间，可能位于 视频图像左侧某个说话者的下方。如果提示是垂直的，则 "line-left" 定位将从 视频视口高度的顶部开始，并且提示盒会覆盖 视频视口高度的 35%。

第一个提示的提示盒内的文本使用 "align" 提示设置进行对齐。对于 从左到右渲染的文本，"start" 对齐是该盒子的左侧；对于从右到左渲染的 文本，则是盒子的右侧。因此，不论文本的方向性如何，它都会保持在 该说话者下方。请注意，提示盒的 "center" 位置对齐是 start 对齐文本的默认值，以避免在文本的基本方向 因翻译而改变（从左到右变为从右到左，或反之）时盒子移动。

第二个提示的提示 盒在视频视口宽度的 90% 标记处右对齐 （"right" 对齐文本会使盒子右对齐）。使用 "position:55%,line-left" 也可以达到 相同效果，这会显式定位提示盒。第三个提示在与第一个提示相同的 已定位提示盒内使用居中对齐文本。

此示例展示了包含两个不同说话者的滚动式说明文字的两个区域。Fred 的 提示在视频左半部分的一个区域中向上滚动，Bill 的提示在视频 右半部分的一个区域中向上滚动。Fred 的第一条提示虽然定义到 20 秒，但会在 12.5 秒消失，因为其区域限制为 3 行，并且在 12.5 秒出现了第四条提示：

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>Hi, my name is Fred

00:00:02.500 --> 00:00:22.500 region:bill align:right
<v Bill>Hi, I'm Bill

00:00:05.000 --> 00:00:25.000 region:fred align:left
<v Fred>Would you like to get a coffee?

00:00:07.500 --> 00:00:27.500 region:bill align:right
<v Bill>Sure! I've only had one today.

00:00:10.000 --> 00:00:30.000 region:fred align:left
<v Fred>This is my fourth!

00:00:12.500 --> 00:00:32.500 region:fred align:left
<v Fred>OK, let's go.

请注意，区域只为水平提示定义。

1.5. WebVTT 中的注释

本节是非规范性的。

WebVTT 文件中可以包含注释。

注释只是前面有一个空行、以单词 "NOTE"（后跟一个空格或换行）开始，并在第一个空行处结束的块。

这里使用单行注释来记录提示可能存在的问题。

WEBVTT

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

NOTE I'm not sure the timing is right on the following cue.

00:05.000 --> 00:09.000
— It will perforate your stomach.
— You could die.

在此示例中，作者编写了许多注释。

WEBVTT

NOTE
This file was written by Jill. I hope
you enjoy reading it. Some things to
bear in mind:
- I was lip-reading, so the cues may
not be 100% accurate
- I didn't pay too close attention to
when the cues should start or end.

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

NOTE check next cue

00:05.000 --> 00:09.000
— It will perforate your stomach.
— You could die.

NOTE end of file

1.6. 章节示例

本节是非规范性的。

WebVTT 文件可以由章节组成，章节是视频的导航标记。

章节是纯文本，通常只是单行。

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

WEBVTT

NOTE
This is from a talk Silvia gave about WebVTT.

Slide 1
00:00:00.000 --> 00:00:10.700
Title Slide

Slide 2
00:00:10.700 --> 00:00:47.600
Introduction by Naomi Black

Slide 3
00:00:47.600 --> 00:01:50.100
Impact of Captions on the Web

Slide 4
00:01:50.100 --> 00:03:33.000
Requirements of a Video text format

1.7. 元数据示例

本节是非规范性的。

WebVTT 文件可以由时间对齐元数据组成。

元数据可以是任何字符串，并且通常作为 JSON 构造提供。

请注意，不能在元数据块内部提供空行，因为空行 表示 WebVTT 提示的结束。

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

WEBVTT

NOTE
Thanks to 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]

作为算法一部分以祈使句表述的要求（例如 "strip any leading space characters" 或 "return false and abort these steps"），应按照 引入该算法时所使用的关键词（"must"、"should"、"may" 等）的含义进行解释。

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

2.1. 一致性类别

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

§ 4 语法定义了有效的WebVTT 文件由什么组成。作者需要 遵循其中的要求，并且鼓励使用一致性检查器。§ 6 解析 定义了用户代理应如何解释标记为text/vtt 的文件，无论其是有效还是 无效的WebVTT 文件。解析 规则比语法允许的内容更能容忍作者错误， 以便提供可扩展性，并且仍然渲染存在某些语法 错误的提示。

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

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

支持脚本的用户代理

本规范中的所有处理要求都适用。用户代理还必须是 本规范中 IDL 片段的符合一致性的实现，如 Web IDL 规范中所述。[WEBIDL]

不支持脚本的用户代理

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

不 支持 CSS 的用户代理

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

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

本规范中的所有处理要求都适用，包括 § 5 WebVTT 说明文字或字幕提示组件的默认类中定义的颜色类。 但是，用户代理需要以使渲染结果等价于完整 CSS 支持渲染器所产生结果的方式， 应用 § 6 解析、§ 7 渲染和§ 8 CSS 扩展中的 CSS 相关特性。

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

本规范中的所有处理要求都适用。但是，只允许有限的一组 CSS 样式，因为不支持完整 HTML CSS 引擎的用户代理需要 实现等价的 CSS 功能。因此，支持完整 CSS 引擎的用户代理必须 限制它们为 WebVTT 应用的 CSS 样式，以便在不混入 超出 WebVTT 规范范围的额外 CSS 样式的情况下实现相同渲染。

一致性检查器

一致性检查器必须验证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 的盒模型由三个关键元素组成：视频视口、提示 和 区域。视频视口是提示和区域被渲染到其中的渲染区域。提示是 由一组提示行组成的盒。区域是视频视口的子区域，用于 将提示分组在一起。提示要么直接定位在视频视口内，要么定位在 区域内，而区域定位在视频视口内。

提示在视频视口内的位置由一组提示设置定义。 区域在视频视口内的位置由一组区域设置定义。位于 区域内的提示只能使用其提示设置的一个有限集合。具体而言，如果提示具有 "vertical"、"line" 或 "size" 设置，则该提示会脱离该区域。否则，提示的宽度 会被计算为相对于区域宽度，而不是视口宽度。

3.1. 概述

本节是非规范性的。

WebVTT 文件是用于承载与视频或 音频资源时间对齐的数据块的容器文件。因此，它可以被视为时间对齐数据的序列化格式。

WebVTT 文件以标头开始，然后包含一系列数据块。如果某个数据块具有 开始时间和结束时间，则称为 WebVTT 提示。注释是另一种数据块。

WebVTT 文件可以承载不同类型的数据。HTML 规范将 说明文字、字幕、章节、音频描述和元数据标识为数据种类，并规定了 在文本轨道种类属性中使用哪一种， 该属性属于文本轨道元素 [HTML]。

WebVTT 文件只能包含一种数据，绝不能混合不同种类的数据。 WebVTT 文件的数据种类由外部指定，例如在 HTML 文件的文本轨道 元素中指定。环境负责正确解释该数据。

WebVTT 说明文字或字幕提示会作为覆盖层渲染在视频视口之上，或者渲染到 区域中，区域是视频视口的一个子区域。

3.2. WebVTT 提示

WebVTT 提示是一个文本轨道提示 [HTML]，它还由以下内容组成：

提示 文本

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

3.3. WebVTT 说明文字或字幕提示

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

提示盒

WebVTT 提示的提示盒 是一个盒，提示所有行的文本都要在其中 渲染。如果提示是区域的一部分，它会被渲染到视频视口或视口内的区域中。

提示盒在视频视口 或区域尺寸内的位置取决于WebVTT 提示位置和WebVTT 提示行的值。

如果行长度使其有必要，行会在提示盒的大小内换行。

书写方向

一种书写方向，可以是

  • 水平（一行水平延伸， 并从视频视口的上边缘垂直偏移，连续的行 显示在彼此下方），
  • 垂直向左增长（一 行垂直延伸，并从视频视口的右边缘水平偏移， 连续的行显示在彼此左侧），或
  • 垂直向右增长（一 行垂直延伸，并从视频视口的左边缘水平偏移， 连续的行显示在彼此右侧）。

书写方向影响对 line、position 和size 提示 设置的解释，使其相对于视频的宽度或高度进行解释。

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

垂直向 左书写方向可用于竖排中文、日文和韩文，而垂直向右 书写 方向可用于竖排蒙古文。

贴靠到行标志

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

标志为 false 的提示会按照请求进行偏移，但如果多个 提示位于同一位置，则会进行重叠避免。

默认情况下，贴靠到行标志被设置为 true。

行

line定义 提示 盒的定位。

line根据书写 方向、贴靠到行 标志，或任何其他正在显示的轨道所占用的行，将提示盒从 视频视口的顶部、右侧或左侧偏移。

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

默认情况下，line被设置为 auto。

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

WebVTT 提示有一个计算行，其值为以下算法返回的值， 该算法根据提示的其他方面定义：

  1. 如果line 是数值，WebVTT 提示的WebVTT 提示贴靠到行标志 为 false，并且line为负数或 大于 100，则返回 100 并中止这些步骤。

    虽然WebVTT 解析器不会将line设置为 0..100 范围之外的数值，并且同时将WebVTT 提示贴靠到行 标志设置为 false，但在使用 DOM API 的 snapToLines 和 line 属性时，这种情况可能发生。

  2. 如果line是数值，则返回WebVTT 提示 line的值，并中止这些步骤。（要么WebVTT 提示贴靠到行标志为 true，因此任何 值（不只是 0..100 范围内的值）都是有效的；要么该值位于 0..100 范围内， 因此无论该标志的值如何都有效。）

  3. 如果WebVTT 提示贴靠到行标志对于WebVTT 提示为 false，则返回 值 100 并中止这些步骤。（line是特殊值 auto。）

  4. 令 cue 为该WebVTT 提示。

  5. 如果 cue 不在某个提示列表中，而该提示列表属于某个文本 轨道；或者如果该文本轨道不在某个媒体 元素的文本轨道列表中，则返回 −1 并中止这些步骤。

  6. 令 track 为其提示 列表包含 cue 的文本轨道。

  7. 令 n 为文本轨道的数量，这些文本轨道的文本轨道模式为showing，并且在媒体元素的文本轨道列表中 位于 track 之前。

  8. 将 n 增加一。

  9. 对 n 取反。

  10. 返回 n。

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

行对齐

提示 盒的line的对齐方式， 为以下之一：

起始对齐
提示盒的 上侧（对于水平提示）、左侧（对于 垂直向 右），或右侧（对于垂直向左） 在line处对齐。
居中对齐
提示盒 在line处居中。
末端对齐
提示盒的 下侧（对于水平提示）、右侧（对于 垂直向 右），或左侧（对于垂直向左） 在line处对齐。

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

行对齐与文本对齐是分开的——从右到左与从左到右的提示 文本 不会影响行对齐。

位置

position定义提示盒在由 书写 方向定义的方向上的缩进。

position要么是一个以百分比值给出提示盒位置的数值， 要么是特殊值 auto，这表示位置应 取决于提示的文本对齐。

如果提示不在区域内，则该百分比值应 解释为视频尺寸的百分比，否则解释为区域 尺寸的百分比。

默认情况下，position被设置为auto。

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

WebVTT 提示有一个计算位置，其值 为以下算法返回的值，该算法根据提示的其他方面定义：

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

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

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

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

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

即使对于具有从右到左提示文本的水平提示， 提示盒也是从 视频视口的左边缘定位的。这允许定义一个渲染空间模板， 可以用从左到右或从右到左的提示文本，或两者填充。

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

当文本对齐为start或end时，auto position 为 50%。这不同于left和right 对齐文本，在这些情况下auto position分别为 0% 和 100%。 上述要求存在的原因是， 自动定位对start或end对齐文本不起作用可能令人意外。由于提示 文本可以由具有从左到右基本方向的文本、从右到左基本方向的文本， 或两者（位于不同行上）组成，这种自动定位会产生意外结果。

位置对齐

提示 盒在书写方向维度上的对齐方式，描述position 锚定到什么，为以下之一：

Line-left 对齐
提示盒的 左侧（对于水平提示）或上侧 （其他情况）在position处对齐。
居中对齐
提示盒 在position处居中。
Line-right 对齐
提示盒的 右侧（对于水平提示）或下侧 （其他情况）在position处对齐。
Auto 对齐
提示盒的 对齐取决于提示的文本对齐的值。

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

WebVTT 提示有一个计算位置 对齐，其值为以下算法返回的值，该算法根据 提示的其他方面定义：

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

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

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

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

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

  6. 否则，返回center。

由于position始终从视频的左侧 （对于水平提示）或顶部 （其他情况）开始测量，WebVTT 提示位置对齐的line-left值会在水平和垂直提示中分别对应左侧 和顶部。

大小

一个给出提示盒大小的数值，应按 书写 方向所定义，解释为视频的百分比。

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

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

文本对齐

提示盒内所有文本行在 书写方向维度上的对齐方式， 为以下之一：

起始对齐
每行文本分别朝向盒子的起始侧对齐，其中该行的 起始侧通过使用 CSS 关于plaintext 值的规则来确定，该值属于unicode-bidi 属性。[CSS-WRITING-MODES-3]
居中对齐
文本在盒子的起始侧和结束侧之间居中对齐。
末端对齐
每行文本分别朝向盒子的结束侧对齐，其中该行的结束 侧通过使用 CSS 关于plaintext 值的规则来确定， 该值属于unicode-bidi 属性。[CSS-WRITING-MODES-3]
左对齐
文本与盒子的左侧对齐（对于水平提示）或上侧 对齐（其他情况）。
右对齐
文本与盒子的右侧对齐（对于水平提示）或下侧 对齐（其他情况）。

默认情况下，文本对齐被设置为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;"。）

默认文本对齐是居中 对齐，不考虑提示文本的基本方向。要使每 行的文本对齐与该行的基本方向匹配（例如英语为左，希伯来语为右），请使用start 对齐，或使用end 对齐来实现相反对齐。

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

WEBVTT

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

这将渲染如下：

Hello!
                                            !םולש

左对齐和右对齐 可用于将提示文本左对齐或右对齐，而不考虑 其各行的基本方向。

区域

提示所属的可选WebVTT 区域。

默认情况下，区域 被设置为 null。

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

当其活跃标志被设置的WebVTT 提示的 书写方向、贴靠到行 标志、line、 行 对齐、position、位置 对齐、size、文本对齐、区域或文本 的值发生变化时，用户代理必须清空文本轨道提示显示状态，然后 立即运行该文本轨道的更新 WebVTT 文本 轨道显示的规则。

3.4. WebVTT 说明文字或字幕区域

WebVTT 区域 表示视频视口的一个子部分，并为WebVTT 说明文字或字幕提示提供受限的 渲染区域。

区域提供了一种对说明文字或字幕提示进行分组的方式，使这些提示可以一起 渲染， 这在向上滚动时尤其重要。

每个WebVTT 区域由以下内容组成：

标识符

由零个或多个字符组成的任意字符串，但不包括 U+0020 SPACE 或 U+0009 CHARACTER TABULATION 字符。该字符串不得包含子串 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）。默认为空字符串。

宽度

一个数值，给出包含提示中每行文本将要在其中渲染的盒子的宽度， 应解释为视频宽度的百分比。默认为 100。

行数值

一个数值，给出包含提示中每行文本将要在其中 渲染的盒子的行数。默认为 3。

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

区域锚点

两个数值，给出区域内锚定到视频 视口的 x 和 y 坐标；即使区域位置发生变化（例如由于字体大小 变化），该点的位置也不会改变。默认为 (0,100)，即区域的左下角。

区域视口锚点

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

滚动值

以下之一：

无
表示区域中的提示不会滚动，而是保持固定在 它们最初被绘制的位置。
向上
表示区域中的提示将被添加到区域底部，并将 区域中已经显示的任何提示向上推，直到新提示的所有行都在 区域中可见。

下图说明了区域如何锚定到视频视口。黑色 十字是锚点，橙色说明锚点在区域内的偏移，绿色说明锚点在 视频视口内的偏移。可以把它想象成用一枚图钉把便条钉到板上：

WebVTT 区域的视觉说明

图像描述：在视频视口内，有一个 WebVTT 区域。 区域内部有一个用黑色十字标记的锚点。从视频视口边缘到锚点的垂直和水平 距离用绿色箭头标记，表示 区域视口锚点的 X 和 Y 偏移。从区域 边缘到锚点的垂直和水平距离用橙色箭头标记，表示区域锚点的 X 和 Y 偏移。 区域的大小由水平方向上的区域宽度和垂直方向上的区域行数 表示。

对于解析，我们还需要以下内容：

文本轨道区域列表

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

3.5. WebVTT 章节提示

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

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

3.6. WebVTT 元数据提示

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

4. 语法

4.1. WebVTT 文件结构

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

WebVTT 文件体 按以下顺序由以下组件组成：

  1. 一个可选的 U+FEFF BYTE ORDER MARK（BOM）字符。
  2. 字符串 "WEBVTT"。
  3. 可选地，一个 U+0020 SPACE 字符或一个 U+0009 CHARACTER TABULATION（tab）字符， 后跟任意数量的非 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 行终止符。

WebVTT 行 终止符由以下之一组成：

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（tab）字符。
  3. 一个WebVTT 行终止符。
  4. 一个WebVTT 区域设置列表。
  5. 一个WebVTT 行终止符。

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（tab）字符。
  3. 一个WebVTT 行终止符。
  4. 任何由零个或多个字符组成的序列，但不包括 U+000A LINE FEED（LF）字符和 U+000D CARRIAGE RETURN（CR）字符；每个字符可选地通过一个WebVTT 行 终止符与下一个字符分隔，但整个所得字符串不得包含子串 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）。该字符串 表示 CSS 样式表；相关 CSS 规范中给出的要求适用。 [CSS22]
  5. 一个WebVTT 行终止符。

WebVTT 提示块 按给定顺序由以下组件组成：

  1. 可选地，一个WebVTT 提示标识符，后跟一个WebVTT 行终止符。
  2. WebVTT 提示 时间。
  3. 可选地，一个或多个 U+0020 SPACE 字符或 U+0009 CHARACTER TABULATION（tab）字符， 后跟一个WebVTT 提示设置列表。
  4. 一个WebVTT 行终止符。
  5. 提示载荷： 可以是WebVTT 说明文字或字幕提示文本、WebVTT 章节标题文本，或WebVTT 元数据文本，但不得包含子串 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）。
  6. 一个WebVTT 行终止符。

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

WebVTT 提示 标识符是任何由一个或多个字符组成且不包含 子串 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）， 也不包含任何 U+000A LINE FEED（LF）字符或 U+000D CARRIAGE RETURN（CR）字符的序列。

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

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

WebVTT 提示块的WebVTT 提示 时间部分按给定顺序由以下 组件组成：

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

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

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

  1. 可选地（如果 hours 非零则为必需）：
    1. 两个或多个ASCII 数字，表示以十进制 整数形式的 hours。
    2. 一个 U+003A COLON 字符（:）
  2. 两个ASCII 数字，表示范围 0 ≤ minutes ≤ 59 内以十进制 整数形式的 minutes。
  3. 一个 U+003A COLON 字符（:）
  4. 两个ASCII 数字，表示范围 0 ≤ seconds ≤ 59 内以十进制 整数形式的 seconds。
  5. 一个 U+002E FULL STOP 字符（.）。
  6. 三个ASCII 数字，表示以十 进制整数形式的一秒的千分位 seconds-frac。

WebVTT 时间戳始终被解释为相对于 WebVTT 文件要与之同步的媒体数据的当前播放 位置。

WebVTT 提示 设置列表由零个或多个WebVTT 提示设置按任意顺序组成，彼此之间由一个 或多个 U+0020 SPACE 字符或 U+0009 CHARACTER TABULATION（tab）字符分隔。每个设置按给定顺序由 以下组件组成：

  1. 一个WebVTT 提示设置名称。
  2. 一个 U+003A COLON（colon）字符。
  3. 一个WebVTT 提示设置值。

WebVTT 提示设置 名称和WebVTT 提示设置值各自由 一个或多个字符组成的任意序列组成，但不包括 U+000A LINE FEED（LF）字符和 - U+000D CARRIAGE RETURN（CR）字符；并且整个所得字符串不得包含 子串 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）。

WebVTT 百分比 由以下组件组成：

  1. 一个或多个ASCII 数字。
  2. 可选地：
    1. 一个 U+002E DOT 字符（.）。
    2. 一个或多个ASCII 数字。
  3. 一个 U+0025 PERCENT SIGN 字符（%）。

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

WebVTT 注释 块按给定顺序由以下组件组成：

  1. 字符串 "NOTE"。
  2. 可选地，以下按给定顺序排列的组件：
    1. 以下之一：
      • 一个 U+0020 SPACE 字符或 U+0009 CHARACTER TABULATION（tab）字符。
      • 一个WebVTT 行终止符。
    2. 任何由零个或多个字符组成的序列，但不包括 U+000A LINE FEED（LF）字符和 U+000D CARRIAGE RETURN（CR）字符；每个字符可选地通过一个WebVTT 行终止符与下一个字符分隔，但整个所得字符串不得包含子串 "-->"（U+002D HYPHEN-MINUS、U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN）。
  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 文本轨道中使用 metadata 文本轨道种类）。

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

WebVTT 说明文字或字幕提示文本是提示载荷，由零个或 多个WebVTT 说明文字或字幕提示组件按 任意顺序组成，每个组件可选地通过一个WebVTT 行终止符与下一个组件分隔。

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

除 HTML 字符引用之外，所有WebVTT 说明文字或字幕提示组件 都可以附加一个或多个提示 组件类名，方式是使用句点（'.'）表示法将提示组件 类名与提示组件起始标签分隔开。类名必须 紧跟在 "period"（.）之后。

WebVTT 提示内部 文本由一个可选的WebVTT 行终止符 后跟零个或多个WebVTT 说明文字或字幕提示组件组成， 这些组件按任意顺序排列，每个组件 可选地后跟一个WebVTT 行终止符。

WebVTT 提示类 范围由一个不允许注解的 "c" WebVTT 提示范围起始标签、 表示提示文本的WebVTT 提示内部文本，以及一个 "c" WebVTT 提示范围结束标签组成。

WebVTT 提示斜体 范围由一个不允许注解的 "i" WebVTT 提示范围起始标签、 表示斜体文本的WebVTT 提示内部文本，以及一个 "i" WebVTT 提示范围结束标签组成。

WebVTT 提示粗体 范围由一个不允许注解的 "b" WebVTT 提示范围起始标签、 表示粗体文本的WebVTT 提示内部文本，以及 一个 "b" WebVTT 提示 范围结束标签组成。

WebVTT 提示 下划线范围由一个不允许注解的 "u" WebVTT 提示范围起始标签、 表示带下划线文本的WebVTT 提示内部文本，以及一个 "u" WebVTT 提示范围结束标签组成。

WebVTT 提示 ruby 范围按给定顺序由以下组件组成：

  1. 一个不允许注解的 "ruby" WebVTT 提示范围起始标签。
  2. 以下一组组件按给定顺序出现一次或多次：
    1. WebVTT 提示内部文本，表示 ruby 基文本。
    2. 一个不允许注解的 "rt" WebVTT 提示范围起始标签。
    3. WebVTT 提示 ruby 文本范围：WebVTT 提示内部 文本，表示 ruby 注解的 ruby 文本组件。
    4. 一个 "rt" WebVTT 提示范围结束标签。如果这是WebVTT 提示 ruby 范围中此 组件组的最后一次出现，则可以省略这最后一个结束标签字符串。
  3. 如果最后一个结束标签字符串未被省略：可选地，一个WebVTT 行终止符。
  4. 如果最后一个结束标签字符串未被省略：零个或多个 U+0020 SPACE 字符或 U+0009 CHARACTER TABULATION（tab）字符，每个字符可选地后跟一个WebVTT 行 终止符。
  5. 一个 "ruby" WebVTT 提示范围结束标签。

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

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

WebVTT 提示语音 范围按给定顺序由以下组件组成：

  1. 一个要求注解的 "v" WebVTT 提示范围起始标签；该注解 表示语音的名称。
  2. WebVTT 提示内部文本。
  3. 一个 "v" WebVTT 提示范围结束标签。如果此WebVTT 提示语音范围是其WebVTT 说明文字或 字幕提示文本序列中唯一的组件，则为了简洁可以省略结束标签。

WebVTT 提示 语言范围按给定 顺序由以下组件组成：

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

以上关于有效 BCP 47 语言标签的要求是一项创作 要求， 因此一致性检查器会对语言标签进行有效性检查，但其他用户代理 不会。

WebVTT 提示范围 起始标签具有 tag name，并且要求或不允许 注解，按给定顺序由以下组件组成：

  1. 一个 U+003C LESS-THAN SIGN 字符（<）。
  2. tag name。
  3. 以下序列出现零次或多次：
    1. U+002E FULL STOP 字符（.）
    2. 一个或多个字符，但不包括 U+0009 CHARACTER TABULATION（tab）字符、U+000A LINE FEED（LF）字符、U+000D CARRIAGE RETURN（CR）字符、U+0020 SPACE 字符、U+0026 AMPERSAND 字符（&）、U+003C LESS-THAN SIGN 字符（<）、U+003E GREATER-THAN SIGN 字符（>）以及 U+002E FULL STOP 字符（.），表示描述提示 范围意义的类。

  4. 如果起始标签要求注解：一个 U+0020 SPACE 字符或一个 U+0009 CHARACTER TABULATION（tab）字符，后跟以下组件中的一个或多个，其表示形式的拼接 具有一个包含至少一个非 U+0020 SPACE 和 U+0009 CHARACTER TABULATION（tab）字符的值：

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

WebVTT 提示范围结束 标签具有 tag name，并按给定顺序由以下组件 组成：

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

WebVTT 提示 时间戳由一个 U+003C LESS-THAN SIGN 字符（<），后跟一个表示提示中给定点变为活跃的时间的 WebVTT 时间戳， 再后跟一个 U+003E GREATER-THAN SIGN 字符（>）组成。该WebVTT 时间戳所表示的时间必须大于提示中任何先前WebVTT 提示时间戳所表示的时间， 并且大于提示的开始时间 偏移，小于提示的结束时间偏移。

WebVTT 提示文本 范围由一个或多个字符组成，但不包括 U+000A LINE FEED （LF）字符、U+000D CARRIAGE RETURN（CR）字符、U+0026 AMPERSAND 字符（&）以及 U+003C LESS-THAN SIGN 字符（<）。

WebVTT 提示范围起始标签注解文本由一个或多个字符 组成，但不包括 U+000A LINE FEED（LF）字符、U+000D CARRIAGE RETURN（CR）字符、U+0026 AMPERSAND 字符（&）以及 U+003E GREATER-THAN SIGN 字符（>）。

4.2.3. WebVTT 章节标题文本

WebVTT 章节 标题文本是提示文本，它使用零个或多个 以下组件，每个组件可选地通过一个WebVTT 行 终止符与下一个组件分隔：

4.3. WebVTT 区域设置

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

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

WebVTT 区域设置列表给出关于区域 尺寸、定位和锚定的配置选项。例如，它允许区域内的一组提示 锚定在区域中心和视频视口中心。在此 示例中，当字体大小增大时，区域会从中心向各个方向均匀增大。

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 提示设置 列表中必须存在WebVTT 区域标识符设置。没有标识符，就无法在语法中将WebVTT 提示与 WebVTT 区域关联起来。

WebVTT 区域标识符设置为区域赋予名称，以便 属于该区域的提示可以引用它。

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

  1. 字符串 "width"。

  2. 一个 U+003A COLON 字符（:）。

  3. 一个WebVTT 百分比。

WebVTT 区域宽度设置为提示渲染到其中的区域提供一个固定宽度， 该宽度以视频宽度的百分比表示，并且 对齐会基于该宽度进行计算。

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

  1. 字符串 "lines"。

  2. 一个 U+003A COLON 字符（:）。

  3. 一个或多个ASCII 数字。

WebVTT 区域行数设置为提示渲染到其中的区域提供一个固定高度， 以行数表示。因此，如果它是滚动区域， 则它定义了 roll-up 区域的高度。

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 盒，即存在一个表示视频视口的相对定位盒， 各区域相对于它绝对定位。溢出被隐藏。

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

  1. 字符串 "scroll"。

  2. 一个 U+003A COLON 字符（:）。

  3. 字符串 "up"。

WebVTT 区域滚动设置指定渲染到 区域中的提示是否允许离开其初始渲染位置并向上卷动，即朝向 视频视口顶部移动。如果省略 scroll 设置，则提示不会从其渲染 位置移动。

提示会逐行添加到区域中，位于现有提示行下方。当一个 已渲染的现有提示行被移除，并且它位于另一个已渲染的提示行上方时，后一个提示 行会移动到它的空间中，从而按给定方向滚动。如果没有足够空间将 新提示行添加到区域中，则最上方的提示行会被推出可见区域（因此 随着进入 overflow:hidden 而逐渐不可见）。这最终会为新的 提示行腾出空间，并允许添加它。

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

4.4. WebVTT 提示设置

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

例如，一组 WebVTT 提示设置可以允许提示盒左对齐， 或定位在右上方，并使其中的提示文本居中对齐。

当前可用且可出现在WebVTT 提示设置 列表中的WebVTT 提示设置如下：

这些设置中的每一个在每个WebVTT 提示设置 列表中都不得出现超过一次。

WebVTT 垂直文本提示设置是一个WebVTT 提示设置，按给定顺序由以下组件组成：

  1. 作为WebVTT 提示设置名称的字符串 "vertical"。

  2. 一个 U+003A COLON 字符（:）。

  3. 作为WebVTT 提示设置值的以下字符串之一："rl"、 "lr"。

WebVTT 垂直文本提示设置将提示配置为使用垂直文本 布局而不是水平文本布局。例如，在日文中有时会使用垂直文本布局。 默认值为水平布局。

WebVTT 行提示 设置按给定顺序由以下组件组成：

  1. 作为WebVTT 提示设置名称的字符串 "line"。

  2. 一个 U+003A COLON 字符（:）。

  3. 作为WebVTT 提示设置值：
    1. 一个偏移值，可以是：
      用于表示相对于视频视口的特定偏移

      一个WebVTT 百分比。

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

WebVTT 行提示设置配置提示盒从视频 视口边缘沿与书写 方向正交的方向偏移。对于水平提示，这是从视频视口顶部开始的垂直偏移； 对于垂直提示，则是水平偏移。根据WebVTT 提示行对齐值，该偏移适用于提示盒的 start、center，或end， 默认情况下为start。 该偏移可以作为与相关书写模式相关的视频视口尺寸的百分比给出，也可以作为行号给出。 行号基于提示第一行的大小。正行号从 视频视口的起始处开始计数（第一行编号为 0），负行号从 视频视口的末尾开始计数（最后一行编号为 −1）。

WebVTT 位置 提示设置按给定顺序由以下组件组成：

  1. 作为WebVTT 提示设置名称的字符串 "position"。

  2. 一个 U+003A COLON 字符（:）。

  3. 作为WebVTT 提示设置值：
    1. 一个位置值，由一个WebVTT 百分比组成。
    2. 一个可选的对齐值，由以下组件组成：
      1. 一个 U+002C COMMA 字符（,）。
      2. 以下字符串之一："line-left"、"center"、 "line-right"

WebVTT 位置提示设置配置提示盒在 与WebVTT 行提示设置正交方向上的缩进位置。 对于水平提示，这是水平位置。提示位置以视频视口的百分比给出。 该定位适用于提示盒的line-left、center，或line-right，这取决于提示的 计算位置对齐，而该值会被 WebVTT 位置提示设置覆盖。

WebVTT 大小提示 设置按给定顺序由以下组件组成：

  1. 作为WebVTT 提示设置名称的字符串 "size"。

  2. 一个 U+003A COLON 字符（:）。

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

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

WebVTT 对齐提示设置按给定顺序由以下组件组成：

  1. 作为WebVTT 提示设置名称的字符串 "align"。

  2. 一个 U+003A COLON 字符（:）。

  3. 作为WebVTT 提示设置值的以下字符串之一："start"、 "center"、"end"、"left"、"right"

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

WebVTT 区域提示 设置按给定顺序由以下组件组成：

  1. 作为WebVTT 提示设置名称的字符串 "region"。

  2. 一个 U+003A COLON 字符（:）。

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

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

4.5. 提示序列的属性

4.5.1. 仅使用嵌套提示的 WebVTT 文件

如果某个WebVTT 文件中的所有提示都遵循 以下规则，则称其为仅使用嵌套提示的 WebVTT 文件：

给定任意两个提示 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 文件中的提示表示为树结构：

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

WEBVTT

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

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

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

4.6. WebVTT 文件的类型

WebVTT 文件的语法定义允许创作各种各样混合 提示的 WebVTT 文件。但是，通常创作的 WebVTT 文件类型只是一个小子集。

一致性检查器在验证WebVTT 文件时，可以提供对这些类型的 语法检查进行限制的选项。

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

如果某个WebVTT 文件中的所有提示都具有 提示载荷，并且该载荷是WebVTT 元数据 文本， 则称其为使用元数据内容的 WebVTT 文件。

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

使用章节 标题文本的 WebVTT 文件是一个仅使用嵌套提示的 WebVTT 文件， 其所有提示都具有提示载荷， 并且该载荷是WebVTT 章节标题文本。

4.6.3. 使用说明文字或字幕提示文本的 WebVTT 文件

如果某个WebVTT 文件中的所有提示都具有 提示载荷，并且该载荷是WebVTT 说明文字或 字幕提示文本，则称其为使用说明文字或字幕提示 文本的 WebVTT 文件。

5. WebVTT 说明文字或字幕提示组件的默认类

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

支持 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）。

为了确定颜色和背景 类的级联， 出现顺序决定这些类的级联。

此示例展示如何使用这些类。

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 文件解析

给定 输入字节流、文本轨道提示列表 output，以及一组 CSS 样式 表 stylesheets 的 WebVTT 解析器，必须使用 UTF-8 解码算法解码该字节 流，然后必须根据下面的WebVTT 解析器算法解析所得 字符串。这会使WebVTT 提示 被添加到 output，并使 CSS 样式 表被添加到 stylesheets。 [RFC3629]

WebVTT 解析器，尤其是 其转换和解析步骤，通常会异步运行， 输入字节流会随着资源下载而增量更新；这称为增量 WebVTT 解析器。

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

WebVTT 解析器 算法如下：

  1. 令 input 为正在解析的字符串，该字符串已转换为 Unicode，并应用了以下 转换：

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

    • 将每个 U+000D CARRIAGE RETURN U+000A LINE FEED（CRLF）字符对替换为单个 U+000A LINE FEED（LF）字符。

    • 将所有剩余的 U+000D CARRIAGE RETURN 字符替换为 U+000A LINE FEED（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 SPACE 字符、U+0009 CHARACTER TABULATION（tab）字符或 U+000A LINE FEED（LF）字符，则中止这些步骤。 文件并未以正确的 WebVTT 文件签名开头，因此未被 成功处理。

  7. 收集一串码点，这些码点 不是 U+000A LINE FEED（LF） 字符。

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

  9. position 指示的字符是 U+000A LINE FEED（LF）字符。将 position 前进到 input 中的下一个字符。

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

  11. 标头：如果 position 指示的字符不是 U+000A LINE FEED（LF） 字符，则使用设置了 in header 标志的收集一个 WebVTT 块。否则， 将 position 前进到 input 中的下一个字符。

  12. 收集一串码点，这些码点是 U+000A LINE FEED（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 LINE FEED（LF） 字符。

  15. 结束：文件已结束。中止这些步骤。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 LINE FEED（LF） 字符。令 line 为这些字符（如果有）。

    2. 将 line count 增加 1。

    3. 如果 position 已超过 input 的末尾，则令 seen EOF 为 true。 否则，由 position 指示的字符 是 U+000A LINE FEED（LF）字符；将 position 前进到 input 中的下一个 字符。

    4. 如果 line 包含三字符子串 "-->"（U+002D HYPHEN-MINUS、 U+002D HYPHEN-MINUS、U+003E GREATER-THAN SIGN），则运行这些子步骤：

      1. 如果未设置 in header，并且以下条件至少有一个为真：

        • line count 为 1

        • line count 为 2 且 seen arrow 为 false

        ……则运行这些子步骤：

        1. 令 seen arrow 为 true。

        2. 令 previous position 为 position。

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

          1. 令 cue 的文本轨道提示 标识符为 buffer。

          2. 令 cue 的文本轨道提示 退出时暂停标志为 false。

          3. 令 cue 的WebVTT 提示区域为 null。

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

          5. 令 cue 的WebVTT 提示 贴靠到行标志为 true。

          6. 令 cue 的WebVTT 提示行为 auto。

          7. 令 cue 的WebVTT 提示行 对齐为起始 对齐。

          8. 令 cue 的WebVTT 提示位置为 auto。

          9. 令 cue 的WebVTT 提示位置 对齐为 auto。

          10. 令 cue 的WebVTT 提示大小为 100。

          11. 令 cue 的WebVTT 提示文本 对齐为居中对齐。

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

        4. 使用 regions，从 line 为 cue 收集 WebVTT 提示 时间和设置。 如果失败，则令 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 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）开头，并且 buffer 中的剩余 字符（如果有）全都是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 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）开头，并且 buffer 中的剩余字符 （如果有）全都是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 LINE FEED（LF） 字符追加到 buffer。

      3. 将 line 追加到 buffer。

      4. 令 previous position 为 position。

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

  12. 如果 cue 不为 null，则令 cue 的提示文本为 buffer，并返回 cue。

  13. 否则，如果 stylesheet 不为 null，则从 buffer 解析样式表。如果它返回了规则列表，则将该列表赋值为 stylesheet 的 CSS 规则；否则，将 stylesheet 的CSS 规则设置为空列表。[CSSOM] [CSS-SYNTAX-3] 最后，返回 stylesheet。

  14. 否则，如果 region 不为 null，则使用 region 作为结果， 从 buffer 收集 WebVTT 区域设置。根据 region 构造一个WebVTT 区域对象，并返回 它。

  15. 否则，返回 null。

6.2. WebVTT 区域设置 解析

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

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

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

  2. 对列表 settings 中的每个令牌 setting，运行以下子步骤：

    1. 如果 setting 不包含 U+003A COLON 字符（:），或者 setting 中第一个 U+003A COLON 字符（:）是 setting 的第一个或最后一个字符，则跳到 标记为 next setting 的步骤。

    2. 令 name 为 setting 的前导子串，直到但不包括该字符串中的 第一个 U+003A COLON 字符（:）。

    3. 令 value 为 setting 的尾随子串，从该字符串中第一个 U+003A COLON 字符（:）之后紧接的字符开始。

    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 COMMA 字符（,），则跳 到标记为 next setting 的步骤。

      2. 令 anchorX 为 value 的前导子串，直到但不 包括该字符串中的第一个 U+002C COMMA 字符（,）。

      3. 令 anchorY 为 value 的尾随子串，从该字符串中 第一个 U+002C COMMA 字符（,）之后紧接的字符开始。

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

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

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

      1. 如果 value 不包含 U+002C COMMA 字符（,），则跳 到标记为 next setting 的步骤。

      2. 令 viewportanchorX 为 value 的前导子串， 直到但不包括该字符串中的第一个 U+002C COMMA 字符（,）。

      3. 令 viewportanchorY 为 value 的尾随子串， 从该字符串中 第一个 U+002C COMMA 字符（,）之后紧接的字符开始。

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

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

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

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

    5. Next setting：继续到下一个设置（如果有）。

解析 百分比字符串的规则如下。这将返回一个 范围为 0..100 的数值，或不返回任何内容。如果算法在任何时刻说它 "fails"， 则表示它在该点中止并且不返回任何内容。

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

  2. 如果 input 与WebVTT 百分比的语法不匹配，则失败。

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

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

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

  6. 返回 percentage。

6.3. WebVTT 提示 时间和设置解析

当上述算法说要使用文本轨道区域列表 regions 为 WebVTT 提示 cue，从字符串 input 收集 WebVTT 提示时间和设置时，用户 代理必须运行以下算法。

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

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

  3. 跳过空白。

  4. 收集一个 WebVTT 时间戳。如果该算法失败， 则中止这些步骤并 返回失败。否则，令 cue 的文本轨道提示开始时间为收集到的 时间。

  5. 跳过空白。

  6. 如果 position 处的字符不是 U+002D HYPHEN-MINUS 字符（-），则中止这些步骤并返回失败。否则，将 position 向前移动一个字符。

  7. 如果 position 处的字符不是 U+002D HYPHEN-MINUS 字符（-），则中止这些步骤并返回失败。否则，将 position 向前移动一个字符。

  8. 如果 position 处的字符不是 U+003E GREATER-THAN SIGN 字符（>），则中止这些步骤并返回失败。否则，将 position 向前移动一个字符。

  9. 跳过空白。

  10. 收集一个 WebVTT 时间戳。如果该算法 失败，则中止这些步骤并 返回失败。否则，令 cue 的文本轨道提示结束时间为收集到的 时间。

  11. 令 remainder 为 input 的尾随子串，从 position 开始。

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

当用户代理要使用 文本 轨道区域列表 regions，为文本轨道提示 cue， 从字符串 input 解析 WebVTT 提示设置时，用户代理必须 运行以下步骤：

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

  2. 对列表 settings 中的每个令牌 setting，运行以下子步骤：

    1. 如果 setting 不包含 U+003A COLON 字符（:），或者 setting 中第一个 U+003A COLON 字符（:）是 setting 的第一个或最后一个字符，则跳到 标记为 next setting 的步骤。

    2. 令 name 为 setting 的前导子串，直到但不包括该字符串中的 第一个 U+003A COLON 字符（:）。

    3. 令 value 为 setting 的尾随子串，从该字符串中 第一个 U+003A COLON 字符（:）之后紧接的字符开始。

    4. 根据 name 的值，运行适用的相应子步骤，如下：

      如果 name 是与 "region" 的区分大小写匹配

      1. 令 cue 的WebVTT 提示区域为 regions 中最后一个WebVTT 区域，该区域的WebVTT 区域标识符是 value；如果不存在，则为 null。

      如果 name 是与 "vertical" 的区分大小写匹配

      1. 如果 value 是与字符串 "rl" 的区分大小写匹配，则令 cue 的WebVTT 提示书写 方向为垂直 向左增长。

      2. 否则，如果 value 是与字符串 "lr" 的区分大小写匹配，则令 cue 的WebVTT 提示书写 方向为垂直 向右增长。

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

      如果 name 是与 "line" 的区分大小写匹配

      1. 如果 value 包含 U+002C COMMA 字符（,），则令 linepos 为 value 的前导 子串，直到但不包括该字符串中的第一个 U+002C COMMA 字符（,），并令 linealign 为 value 的尾随子串， 从该字符串中 第一个 U+002C COMMA 字符（,）之后紧接的字符开始。

      2. 否则，令 linepos 为完整的 value 字符串， 并令 linealign 为 null。

      3. 如果 linepos 不包含至少一个ASCII 数字，则跳到 标记为 next setting 的步骤。

      4. 如果 linepos 的最后一个字符是 U+0025 PERCENT SIGN 字符（%）

        如果从 linepos 解析百分比 字符串没有失败，则令 number 为返回的 percentage，否则跳到 标记为 next setting 的步骤。

        否则

        1. 如果 linepos 包含除 U+002D HYPHEN-MINUS 字符 （-）、ASCII 数字和 U+002E DOT 字符（.）之外的任何字符，则跳到标记为 next setting 的步骤。

        2. 如果 linepos 中除第一个字符外的任何字符 是 U+002D HYPHEN-MINUS 字符（-），则跳到标记为 next setting 的步骤。

        3. 如果有多个 U+002E DOT 字符（.），则跳到 标记为 next setting 的步骤。

        4. 如果存在 U+002E DOT 字符（.），且其前一个字符或 后一个字符不是ASCII 数字，或者如果 U+002E DOT 字符（.）是第一个或 最后一个字符，则跳到标记为 next setting 的步骤。

        5. 令 number 为使用解析 浮点数值的规则解析 linepos 的结果。[HTML]

        6. 如果 number 是错误，则跳到标记为 next setting 的步骤。

      5. 如果 linealign 是与字符串 "start" 的区分大小写匹配， 则令 cue 的WebVTT 提示行对齐为 起始对齐。

      6. 否则，如果 linealign 是与字符串 "center" 的区分大小写匹配，则令 cue 的WebVTT 提示行对齐为 居中对齐。

      7. 否则，如果 linealign 是与字符串 "end" 的区分大小写匹配，则令 cue 的WebVTT 提示行对齐为 末端对齐。

      8. 否则，如果 linealign 不为 null，则跳到标记为 next setting 的步骤。

      9. 令 cue 的WebVTT 提示行为 number。

      10. 如果 linepos 的最后一个字符是 U+0025 PERCENT SIGN 字符（%），则令 cue 的WebVTT 提示贴靠到行 标志为 false。否则，令其为 true。

      11. 如果 cue 的WebVTT 提示行不是 auto， 则令 cue 的WebVTT 提示区域为 null（该提示 已使用行偏移显式定位，因此脱离区域）。

      如果 name 是与 "position" 的区分大小写匹配

      1. 如果 value 包含 U+002C COMMA 字符（,），则令 colpos 为 value 的前导 子串，直到但不包括该字符串中的第一个 U+002C COMMA 字符（,），并令 colalign 为 value 的尾随子串， 从该字符串中 第一个 U+002C COMMA 字符（,）之后紧接的字符开始。

      2. 否则，令 colpos 为完整的 value 字符串，并 令 colalign 为 null。

      3. 如果从 colpos 解析百分比字符串 没有失败，则令 number 为 返回的 percentage，否则跳到标记为 next setting 的步骤（position 的值保持为 特殊值 auto）。

      4. 如果 colalign 是与字符串 "line-left" 的区分大小写匹配，则令 cue 的WebVTT 提示位置 对齐为line-left 对齐。

      5. 否则，如果 colalign 是与字符串 "center" 的区分大小写匹配，则令 cue 的WebVTT 提示位置 对齐为居中对齐。

      6. 否则，如果 colalign 是与字符串 "line-right" 的区分大小写匹配，则令 cue 的WebVTT 提示位置 对齐为line-right 对齐。

      7. 否则，如果 colalign 不为 null，则跳到标记为 next setting 的步骤。

      8. 令 cue 的position为 number。

      如果 name 是与 "size" 的区分大小写匹配

      1. 如果从 value 解析百分比字符串 没有失败，则令 number 为 返回的 percentage，否则跳到标记为 next setting 的步骤。

      2. 令 cue 的WebVTT 提示大小为 number。

      3. 如果 cue 的WebVTT 提示大小不是 100，则令 cue 的WebVTT 提示区域为 null（该提示已显式设定大小，因此脱离区域）。

      如果 name 是与 "align" 的区分大小写匹配

      1. 如果 value 是与字符串 "start" 的区分大小写匹配，则 令 cue 的WebVTT 提示文本对齐 为起始 对齐。

      2. 如果 value 是与字符串 "center" 的区分大小写匹配，则 令 cue 的WebVTT 提示文本对齐 为居中 对齐。

      3. 如果 value 是与字符串 "end" 的区分大小写匹配，则 令 cue 的WebVTT 提示文本对齐 为末端 对齐。

      4. 如果 value 是与字符串 "left" 的区分大小写匹配，则 令 cue 的WebVTT 提示文本对齐 为左 对齐。

      5. 如果 value 是与字符串 "right" 的区分大小写匹配，则 令 cue 的WebVTT 提示文本对齐 为右 对齐。

    5. Next setting：继续到下一个令牌（如果有）。

当本规范说用户代理要收集一个 WebVTT 时间戳时， 用户代理必须运行以下步骤：

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

  2. 令 most significant units 为 minutes。

  3. 如果 position 已超过 input 的末尾，则返回错误并中止这些步骤。

  4. 如果 position 指示的字符不是ASCII 数字，则返回错误 并中止这些步骤。

  5. 收集一串码点，这些码点是 ASCII 数字，并令 string 为 收集到的子串。

  6. 将 string 解释为十进制整数。令 value1 为该 整数。

  7. 如果 string 的长度不正好为两个字符，或者 value1 大于 59，则令 most significant units 为 hours。

  8. 如果 position 超出 input 的末尾，或者 position 处的字符不是 U+003A COLON 字符（:），则返回错误并中止这些步骤。否则，将 position 向前移动一个字符。

  9. 收集一串码点，这些码点是 ASCII 数字，并令 string 为 收集到的子串。

  10. 如果 string 的长度不正好为两个字符，则返回错误并中止这些 步骤。

  11. 将 string 解释为十进制整数。令 value2 为该 整数。

  12. 如果 most significant units 为 hours，或者如果 position 未超出 input 的末尾 且 position 处的字符是 U+003A COLON 字符（:），则运行这些子步骤：

    1. 如果 position 超出 input 的末尾，或者 position 处的字符不是 U+003A COLON 字符（:），则返回错误并中止这些步骤。否则，将 position 向前移动一个字符。

    2. 收集一串码点， 这些码点是ASCII 数字，并令 string 为 收集到的子串。

    3. 如果 string 的长度不正好为两个字符，则返回错误并中止这些 步骤。

    4. 将 string 解释为十进制整数。令 value3 为该 整数。

    否则（如果 most significant units 不是 hours，并且 position 已超出 input 的末尾，或 position 处的字符不是 U+003A COLON 字符 （:）），令 value3 具有 value2 的值，然后 value2 具有 value1 的值，然后令 value1 等于零。

  13. 如果 position 超出 input 的末尾，或者 position 处的字符不是 U+002E FULL STOP 字符（.），则返回错误并中止这些步骤。否则，将 position 向前移动一个字符。

  14. 收集一串码点，这些码点是 ASCII 数字，并令 string 为 收集到的子串。

  15. 如果 string 的长度不正好为三个字符，则返回错误并中止这些 步骤。

  16. 将 string 解释为十进制整数。令 value4 为该 整数。

  17. 如果 value2 大于 59，或者如果 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 下划线对象

这些表示WebVTT 说明文字或字幕提示文本中的下划线文本范围（一个 WebVTT 提示下划线范围）。

WebVTT Ruby 对象

这些表示WebVTT 说明文字或字幕 提示文本中的 ruby 范围（一个 WebVTT 提示 ruby 范围）。

WebVTT Ruby 文本对象

这些表示WebVTT 说明文字或 字幕提示文本中的 ruby 文本范围（一个 WebVTT 提示 ruby 文本范围）。

WebVTT 语音对象

这些表示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. 创建一个WebVTT 文本对象，其值为字符串标记 token 的值。

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

    如果 token 是起始标签

    如何处理起始标签标记 token 取决于其标签名，如下：

    如果标签名是 "c"

    附加一个 WebVTT 类对象。

    如果标签名是 "i"

    附加一个 WebVTT 斜体对象。

    如果标签名是 "b"

    附加一个 WebVTT 粗体对象。

    如果标签名是 "u"

    附加一个 WebVTT 下划线 对象。

    如果标签名是 "ruby"

    附加一个 WebVTT Ruby 对象。

    如果标签名是 "rt"

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

    如果标签名是 "v"

    附加一个 WebVTT 语音对象，并 将其值设置为该标记的注解字符串，如果没有注解 字符串，则设置为空字符串。

    如果标签名是 "lang"

    将该标记的注解字符串的值推入 language stack；如果没有 注解字符串，则推入空字符串；然后附加一个 WebVTT 语言对象。

    否则

    忽略该标记。

    当上述步骤说要附加特定具体类别的 WebVTT 内部节点对象时， 用户代理必须运行以下步骤：

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

    2. 将新对象的适用 类列表设置为标记中的类列表，不包括任何空 字符串类。

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

    4. 将新创建的节点对象追加到 current。

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

    如果 token 是结束标签

    如果以下任何条件为真，则令 current 为 current 的父节点。

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

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

    否则，忽略该标记。

    如果 token 是时间戳标签

    1. 令 input 为标签值。

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

    3. 收集一个 WebVTT 时间戳。

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

      否则，忽略该标记。

  10. 跳到标记为 loop 的步骤。

WebVTT 提示文本 标记器如下。它发出一个标记，该标记可以是 字符串（其值为字符序列）、起始标签（带有标签名、类列表， 以及可选的注解）、结束标签（带有标签名），或时间戳标签（带有标签 值）。

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

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

  3. 令 result 为空字符串。

  4. 令 classes 为空列表。

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

    文件结束标记不是 Unicode 字符，它用于结束 标记器。

  6. 跳到由 tokenizer state 给出的状态：

    WebVTT 数据 状态

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

    U+0026 AMPERSAND（&）

    将 tokenizer state 设置为数据状态中的 HTML 字符引用，并跳到 标记为 next 的步骤。

    U+003C LESS-THAN SIGN（<）

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

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

    文件结束标记

    返回一个值为 result 的字符串标记并中止这些步骤。

    其他任何内容

    将 c 追加到 result，并跳到标记为 next 的步骤。

    数据状态中的 HTML 字符引用

    尝试消费一个 HTML 字符 引用，不带额外允许 字符。

    如果没有返回任何内容，则将 U+0026 AMPERSAND 字符（&）追加到 result。

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

    然后，无论如何，将 tokenizer state 设置为WebVTT 数据状态，并 跳到标记为 next 的步骤。

    WebVTT 标签 状态

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

    U+0009 CHARACTER TABULATION（tab）字符
    U+000A LINE FEED（LF）字符
    U+000C FORM FEED（FF）字符
    U+0020 SPACE 字符

    将 tokenizer state 设置为WebVTT 起始标签注解 状态，并跳到标记为 next 的步骤。

    U+002E FULL STOP 字符（.）

    将 tokenizer state 设置为WebVTT 起始标签类状态，并 跳到标记为 next 的步骤。

    U+002F SOLIDUS 字符（/）

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

    ASCII 数字

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

    U+003E GREATER-THAN SIGN 字符（>）

    将 position 前进到 input 中的下一个字符，然后跳到 下面下一个 "end-of-file marker" 条目。

    文件结束标记

    返回一个标签名为空字符串、没有类且没有注解的起始标签， 并中止这些步骤。

    其他任何内容

    将 result 设置为 c，将 tokenizer state 设置为WebVTT 起始标签状态，并跳 到标记为 next 的步骤。

    WebVTT 起始标签状态

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

    U+0009 CHARACTER TABULATION（tab）字符
    U+000C FORM FEED（FF）字符
    U+0020 SPACE 字符

    将 tokenizer state 设置为WebVTT 起始标签注解 状态，并跳到标记为 next 的步骤。

    U+000A LINE FEED（LF）字符

    将 buffer 设置为 c，将 tokenizer state 设置为WebVTT 起始标签注解 状态， 并跳到标记为 next 的步骤。

    U+002E FULL STOP 字符（.）

    将 tokenizer state 设置为WebVTT 起始标签类状态，并 跳到标记为 next 的步骤。

    U+003E GREATER-THAN SIGN 字符（>）

    将 position 前进到 input 中的下一个字符，然后跳到 下面下一个 "end-of-file marker" 条目。

    文件结束标记

    返回一个标签名为 result、没有类且没有注解的起始标签，并中止 这些步骤。

    其他任何内容

    将 c 追加到 result，并跳到标记为 next 的步骤。

    WebVTT 起始标签类状态

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

    U+0009 CHARACTER TABULATION（tab）字符
    U+000C FORM FEED（FF）字符
    U+0020 SPACE 字符

    向 classes 追加一个值为 buffer 的条目，将 buffer 设置为空字符串，将 tokenizer state 设置为WebVTT 起始标签注解 状态，并跳到标记为 next 的步骤。

    U+000A LINE FEED（LF）字符

    向 classes 追加一个值为 buffer 的条目，将 buffer 设置为 c，将 tokenizer state 设置为WebVTT 起始标签注解 状态，并跳到标记为 next 的步骤。

    U+002E FULL STOP 字符（.）

    向 classes 追加一个值为 buffer 的条目，将 buffer 设置为空字符串，并 跳到标记为 next 的步骤。

    U+003E GREATER-THAN SIGN 字符（>）

    将 position 前进到 input 中的下一个字符，然后跳到 下面下一个 "end-of-file marker" 条目。

    文件结束标记

    向 classes 追加一个值为 buffer 的条目，然后返回一个 标签名为 result、具有 classes 中给出的类但没有 注解的起始标签，并中止这些 步骤。

    其他任何内容

    将 c 追加到 buffer，并跳到标记为 next 的步骤。

    WebVTT 起始标签注解状态

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

    U+0026 AMPERSAND（&）

    将 tokenizer state 设置为注解状态中的 HTML 字符 引用，并跳到 标记为 next 的步骤。

    U+003E GREATER-THAN SIGN 字符（>）

    将 position 前进到 input 中的下一个字符，然后跳到 下面下一个 "end-of-file marker" 条目。

    文件结束标记

    从 buffer 中移除任何前导或尾随ASCII 空白字符，并 将 buffer 中任何一个或多个连续ASCII 空白字符的序列 替换为单个 U+0020 SPACE 字符；然后，返回一个标签名为 result、 具有 classes 中给出的类，并以 buffer 作为 注解的起始标签，并中止这些 步骤。

    其他任何内容

    将 c 追加到 buffer，并跳到标记为 next 的步骤。

    注解状态中的 HTML 字符引用

    尝试消费一个 HTML 字符 引用，其中额外允许 字符为 U+003E GREATER-THAN SIGN（>）。

    如果没有返回任何内容，则将 U+0026 AMPERSAND 字符（&）追加到 buffer。

    否则，将返回的字符标记的数据追加到 buffer。

    然后，无论如何，将 tokenizer state 设置为WebVTT 起始标签注解状态， 并 跳到标记为 next 的步骤。

    WebVTT 结束 标签状态

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

    U+003E GREATER-THAN SIGN 字符（>）

    将 position 前进到 input 中的下一个字符，然后跳到 下面下一个 "end-of-file marker" 条目。

    文件结束标记

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

    其他任何内容

    将 c 追加到 result，并跳到标记为 next 的步骤。

    WebVTT 时间戳标签状态

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

    U+003E GREATER-THAN SIGN 字符（>）

    将 position 前进到 input 中的下一个字符，然后跳到 下面下一个 "end-of-file marker" 条目。

    文件结束标记

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

    其他任何内容

    将 c 追加到 result，并跳到标记为 next 的步骤。

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

  8. 跳到标记为 loop 的步骤。

当上述算法说要尝试消费一个 HTML 字符引用时，意思是尝试 按 HTML 中定义的方式消费字符引用。[HTML]

当 HTML 规范说要消费一个字符时，在此上下文中，这意味着将 position 前进到 input 中的下一个字符。当它说要反消费一个字符时， 意味着将 position 移回 input 中的前一个字符。"EOF" 等同于本规范中的 文件结束标记。 最后，此上下文不是 "as part of an attribute"（涉及处理缺失分号时）。

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

为了通过 getCueAsHTML() 方法（属于 VTTCue 接口）获取WebVTT 提示的内容，需要将其解析为 DocumentFragment。 本节描述如何实现。

要将WebVTT 节点对象列表转换为 Document owner 的 DOM 树，用户 代理必须创建一棵与WebVTT 节点对象树同构的 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 时间戳， 表示该WebVTT 时间戳对象的值，其中包含所有可选 组件， 如果 hours 组件小于十，则带一个前导零，否则不带 前导 零。

作为上述映射的一部分创建的 HTML 元素，必须将其 namespaceURI 设置为HTML 命名空间，使用 HTML 规范中定义的相应 IDL 接口， 并且如果对应的WebVTT 内部节点 对象具有任何适用类，则必须具有一个class 属性，其值设置为通过串联所有这些类得到的字符串， 每个 类与下一个类之间用单个 U+0020 SPACE 字符分隔。

DOM 树中所有节点的 ownerDocument 属性必须设置为给定 文档 owner。

以上未描述或不依赖于以上定义特性的 DOM 节点的所有特性， 必须保留其初始值。

6.6. WebVTT 提取章节 标题的规则

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

  1. 令 nodes 为通过将WebVTT 提示 文本解析规则应用到 cue 的提示文本而获得的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。否则，令 reset 为 false。

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

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

  8. 对于 tracks 中的每个轨道 track，将 track 的提示列表中 其文本轨道提示 活跃标志已设置的所有提示 追加到 cues。

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

  10. 对于 tracks 中的每个轨道 track，将 track 的 区域列表中所有带有标识符的区域追加到 regions。

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

  12. 对每个 regionNode 应用以下步骤：

    1. 为将 CSS 属性应用到 regionNode 准备一些变量，如下：

      • 令 regionWidth 为WebVTT 区域宽度。令 width 为 regionWidth vw（vw 是 CSS 单位）。[CSS-VALUES]

      • 令 lineHeight 为 6vh（vh 是 CSS 单位）[CSS-VALUES]，并令 regionHeight 为 WebVTT 区域行数。令 lines 为 lineHeight 乘以 regionHeight。

      • 令 viewportAnchorX 为WebVTT 区域 锚点的 x 维度，并且 regionAnchorX 为WebVTT 区域 锚点的 x 维度。令 leftOffset 为 regionAnchorX 乘以 width 再除以 100.0。令 left 为从 viewportAnchorX vw 中减去 leftOffset 的结果。

      • 令 viewportAnchorY 为WebVTT 区域 锚点的 y 维度，并且 regionAnchorY 为WebVTT 区域 锚点的 y 维度。令 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 为通过将WebVTT 提示文本解析规则（如果提供，则带回退语言 language） 应用于 cue 的提示文本而获得的 WebVTT 节点对象列表。

    2. 如果 cue 的WebVTT 提示区域为 null，则运行以下 子步骤：

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

      2. 令 cue 的文本轨道提示显示状态具有 boxes 中的 CSS 盒。

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

    3. 否则，运行以下子步骤：

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

      2. 如果 region 的WebVTT 区域滚动设置为向上，且 region 已经有 一个子节点，则将 region 的transition-property 设置为 top，并将transition-duration 设置为 0.433s。

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

      4. 使用 cue 的计算位置 对齐按如下方式调整 offset：

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

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

        如果计算位置 对齐为line-right 对齐

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

      5. 令 left 为 offset %。[CSS-VALUES]

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

      7. 如果 boxes 中没有行盒，则跳过 cue 的这些子步骤的其余部分。 该提示被忽略。

      8. 令 cue 的文本轨道提示显示状态具有 boxes 中的 CSS 盒。

      9. 将 boxes 中的 CSS 盒添加到 region。

      10. 如果 CSS 盒 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 值：

    如果计算位置对齐为line-left

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

    如果计算位置对齐为line-right

    令 maximum size 为计算位置。

    如果计算位置对齐为center，且计算位置小于或等于 50

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

    如果计算位置对齐为center，且计算位置大于 50

    令 maximum size 为从 100 中减去计算 位置，然后将结果乘以二所得的结果。

  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 提示书写方向为水平
    如果计算位置对齐为line-left 对齐

    令 x-position 为计算 位置。

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

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

    如果计算位置对齐为line-right 对齐

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

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

    令 y-position 为计算 位置。

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

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

    如果计算位置对齐为line-right 对齐

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

  6. 按照以下列表中的适用规则，确定 cue 尚未计算的 x-position 或 y-position 的值：

    如果WebVTT 提示贴靠到行标志为 false
    如果WebVTT 提示书写方向为水平

    令 y-position 为计算行。

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

    令 x-position 为计算行。

    如果WebVTT 提示贴靠到行标志为 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 提示贴靠到行标志为 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. 通过加上 0.5 然后向下取整，将 line 舍入为整数。

    6. 垂直向左增长：将 line 加一，然后取反。

    7. 令 position 为 step 和 line 相乘的结果。

    8. 垂直向左增长：将 position 减去 boxes 中盒的边界 盒宽度，然后将 position 增加 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 中的任何盒 重叠，并且 boxes 中所有盒都完全位于 title area 盒内，则跳到 下面标记为 done positioning 的步骤。

    14. 水平：如果 step 为负且 boxes 中第一个行盒的顶部现在位于 title area 顶部之上， 或者如果 step 为正且 boxes 中第一个行盒的底部现在位于 title area 底部之下，则跳到 标记为 switch direction 的步骤。

      垂直：如果 step 为负且 boxes 中第一个行盒的左边缘现在位于 title area 左边缘的左侧， 或者如果 step 为正且 boxes 中第一个行盒的右边缘现在位于 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 提示贴靠到行标志为 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 中的任何盒重叠，并且 boxes 中所有盒都位于 video 的渲染区域内，则 跳到下面标记为 done positioning 的步骤。

    4. 如果存在某个位置，可以在保持 boxes 中盒彼此之间 相对位置的同时，将 boxes 中的盒移动到该处，使得 boxes 中没有任何盒会与 output 中的任何盒重叠，并且 boxes 中所有盒都会位于 video 的渲染区域内，则将 boxes 中的盒移动到 距离其当前位置最近的这样的位置，然后跳到下面标记为 done positioning 的步骤。 如果存在多个与当前位置等距的这种位置，则使用其中 最高的一个；如果该高度有多个，则使用其中最靠左的一个。

    5. 否则，跳到下面标记为 done positioning 的步骤。（这些盒将 不幸地发生重叠。）

  11. Done positioning：返回 boxes。

7.3. 获得 CSS 盒

当上述处理算法要求用户代理获得一组 CSS 盒 boxes 时，用户代理要在以下约束内将 CSS 规范的条款应用于 nodes： [CSS22]

令 boxes 为作为初始包含块的后代而生成的盒以及 它们的位置。

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

遵循更新 WebVTT 文本轨道显示的规则时，用户代理必须 按本节定义，在 CSS 用户代理级联层中设置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 节点对象列表和WebVTT 区域 对象上的继承属性必须采用其初始值。

如果存在适用于媒体元素或其他播放机制的样式表， 则它们必须按下一节中的定义进行解释。

8. CSS 扩展

本节规定了一些 CSS 伪元素和伪类，以及它们如何 应用于 WebVTT。本节不适用于不支持 CSS 的用户代理。

8.1. 引言

本节是非规范性的。

::cue 伪元素表示一个提示。

::cue(selector) 伪元素表示一个提示，或提示内部与给定 选择器匹配的元素。

::cue-region 伪元素表示一个区域。

::cue-region(selector) 伪元素表示一个区域，或区域内部 与给定选择器匹配的元素。

与所有其他伪元素类似，这些伪元素并不直接存在于 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;
}

任意WebVTT 节点对象列表，其提示的 文本轨道提示标识符 与给定 ID 匹配。 

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

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(*:not(:root)) {
  color: yellow;
}

所有WebVTT 内部节点对象

WEBVTT

00:00:00.000 --> 00:00:08.000
White!
<c>Yellow!</c>
<i>Yellow!</i>
<u>Yellow!</u>

类选择器，用于 ::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 时间戳对象的提示中，取决于 当前播放位置的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;
}

任意区域（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 区域对象列表），其WebVTT 区域标识符 与给定 ID 匹配。

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 节点 对象可以由下面定义的特定伪选择器匹配。这些选择器可以在提示正在渲染期间开始或停止匹配个别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 提示背景盒， 而不是应用到WebVTT 节点对象列表。

以下属性适用于不带参数的 ::cue 伪元素；设置在该伪元素上的其他属性 必须被忽略：

带参数的 ::cue(selector) 伪元素必须具有一个由 CSS 选择器组成的参数 [SELECTORS4]。它匹配为匹配元素构造的任何 WebVTT 内部节点 对象，该对象还要与给定的 CSS 选择器匹配，其中节点按如下方式处理：

以下属性适用于带参数的 ::cue() 伪元素：

此外，当选择器不包含 :past 和 :future 伪类时， 以下属性适用于带参数的 ::cue() 伪元素：

不适用的属性必须被忽略。

作为一个特殊例外，与 background 简写对应的属性，在本来会被应用到 WebVTT 节点对象列表时，必须改为应用到 WebVTT 提示背景盒。

8.2.2. :past 和 :future 伪类

:past 和 :future 伪类有时会匹配WebVTT 节点对象。[SELECTORS4]

:past 伪类仅匹配处于过去的WebVTT 节点对象。

一个WebVTT 节点对象 c 处于过去，是指在对 WebVTT 提示的WebVTT 节点对象列表进行前序深度优先遍历时， 存在一个WebVTT 时间戳对象，其值小于作为匹配元素的 媒体元素的当前播放 位置，并且该时间戳对象完全位于 WebVTT 节点对象 c 之后。

:future 伪类仅匹配处于未来的WebVTT 节点 对象。

一个WebVTT 节点对象 c 处于未来，是指在对 WebVTT 提示的WebVTT 节点对象列表进行前序深度优先遍历时， 存在一个WebVTT 时间戳对象，其值大于作为匹配元素的 媒体元素的当前播放 位置，并且该时间戳对象完全位于 WebVTT 节点对象 c 之前。

8.2.3. ::cue-region 伪元素

伪元素应用于由选择器匹配的元素。出于本节目的， 该元素是匹配元素。下面定义的伪元素影响为该匹配元素渲染的文本 轨道区域的样式。

如果匹配元素不是 video 元素，则根据本规范， 下面定义的伪元素不会产生任何效果。

::cue-region 伪元素（不带参数）匹配为匹配元素构造的任何 WebVTT 区域 对象列表。

带参数的 ::cue-region(selector) 伪元素必须具有一个 由 CSS 选择器组成的参数 [SELECTORS4]。它匹配为匹配元素构造的任何 WebVTT 区域对象列表， 且该列表还按如下方式与给定 CSS 选择器匹配：

没有为 ::cue-region(selector) 定义其他选择器匹配。

适用于 ::cue 的相同属性也适用于 ::cue-region 伪元素； 设置在该伪元素上的其他属性必须被忽略。

当用户代理正根据更新 WebVTT 文本轨道显示的规则 渲染一个或多个文本轨道区域时，渲染中使用的WebVTT 区域 对象可以由上述伪元素匹配。支持该伪元素的用户代理必须相应地动态更新 渲染。当 white-space 或与 font 简写 对应的属性之一（包括 line-height）的值发生变化时， 该区域中所有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]
interface VTTCue : TextTrackCue {
  constructor(double startTime, unrestricted double endTime, DOMString text);
  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 参数设置文本轨道提示结束时间。当该值为 正 Infinity 时，VTTCue 对象 表示一个无界文本轨道提示。

text 参数设置提示文本。

cue . region

返回此提示所属的 VTTRegion 对象（如果有），否则返回 null。

可以设置。

cue . vertical [ = value ]

返回表示WebVTT 提示书写方向的字符串，如下所示：

如果它是水平

空字符串。

如果它是垂直向左 增长

字符串 "rl"。

如果它是垂直向右 增长

字符串 "lr"。

可以设置。

cue . snapToLines [ = value ]

如果WebVTT 提示贴靠到行标志为 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()

将提示文本作为由 HTML 元素和其他 DOM 节点组成的 DocumentFragment 返回。

VTTCue(startTime, endTime, text) 构造器在被调用时，必须运行以下步骤：

  1. 创建一个新的WebVTT 提示。令 cue 为该WebVTT 提示。

  2. 令 cue 的文本轨道提示开始时间为 startTime 参数的值。

  3. 如果 endTime 参数的值为负 Infinity 或 Not-a-Number（NaN）值， 则抛出 TypeError 异常。否则，令 cue 的文本轨道提示结束时间为 endTime 参数的值。

  4. 令 cue 的提示文本为 text 参数的值，并令提取章节标题的规则为 WebVTT 提取章节 标题的规则。

  5. 令 cue 的文本轨道提示标识符为空字符串。

  6. 令 cue 的文本轨道提示退出时暂停标志为 false。

  7. 令 cue 的WebVTT 提示区域为 null。

  8. 令 cue 的WebVTT 提示书写方向为水平。

  9. 令 cue 的WebVTT 提示贴靠到行标志为 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 属性在获取时，必须返回表示 VTTCue 对象所表示的 WebVTT 提示的WebVTT 提示区域的 VTTRegion 对象（如果有）；否则返回 null。在设置时，必须将WebVTT 提示区域设置为新值。

vertical 属性在获取时，必须返回下表中某行第二个单元格中的字符串， 该行第一个单元格是 VTTCue 对象所表示的WebVTT 提示的 WebVTT 提示书写 方向：

WebVTT 提示书写方向 vertical 值
水平 ""（空字符串）
垂直向左增长 "rl"
垂直向右 增长 "lr"

在设置时，必须将WebVTT 提示书写方向设置为上表中某行第一个 单元格给出的值，该行第二个单元格与新值区分大小写匹配。

snapToLines 属性在获取时，如果 VTTCue 对象所表示的 WebVTT 提示的 WebVTT 提示贴靠到行标志为 true，则必须返回 true； 否则返回 false。在设置时，必须将WebVTT 提示贴靠到行标志设置为 新值。

line 属性在获取时，必须返回 VTTCue 对象 所表示的WebVTT 提示的 WebVTT 提示 行。特殊值 auto 必须表示为字符串 "auto"。 在设置时，必须将WebVTT 提示 行设置为新值；如果新值是字符串 "auto"，则必须将其解释为特殊值 auto。

为了能够以任意顺序设置 snapToLines 和 line 属性，API 不会拒绝在 line 的值超出 0..100 范围时将 snapToLines 设置为 false，反之亦然。

lineAlign 属性在获取时，必须返回 下表中某行第二个单元格中的字符串，该行第一个单元格是 VTTCue 对象所表示的WebVTT 提示的 WebVTT 提示行 对齐：

WebVTT 提示行对齐 lineAlign 值
起始对齐 "start"
居中对齐 "center"
末端对齐 "end"

在设置时，必须将WebVTT 提示行对齐设置为上表中某行第一个单元格 给出的值，该行第二个单元格与新值区分大小写匹配。

position 属性在获取时，必须返回 VTTCue 对象所表示的WebVTT 提示的 WebVTT 提示 位置。特殊值 auto 必须表示为字符串 "auto"。 在设置时，如果新值为负数或大于 100，则必须抛出 IndexSizeError 异常。否则，必须将WebVTT 提示位置设置为新值；如果新值是字符串 "auto"，则必须将其解释为特殊值 auto。

positionAlign 属性在获取时，必须返回 下表中某行第二个单元格中的字符串，该行第一个单元格是 VTTCue 对象所表示的WebVTT 提示的 WebVTT 提示位置 对齐：

WebVTT 提示位置对齐 positionAlign 值
Line-left 对齐 "line-left"
居中对齐 "center"
Line-right 对齐 "line-right"
自动对齐 "auto"

在设置时，必须将WebVTT 提示位置对齐设置为上表中某行第一个 单元格给出的值，该行第二个单元格与新值区分大小写匹配。

size 属性在获取时，必须返回 VTTCue 对象 所表示的WebVTT 提示的 WebVTT 提示 大小。在设置时，如果新值为负数或大于 100，则必须抛出 IndexSizeError 异常。 否则，必须将WebVTT 提示 大小设置为新值。

align 属性在获取时，必须返回下表中某行 第二个单元格中的字符串，该行第一个单元格是 VTTCue 对象 所表示的WebVTT 提示的 WebVTT 提示文本对齐：

WebVTT 提示文本对齐 align 值
起始对齐 "start"
居中对齐 "center"
末端对齐 "end"
左对齐 "left"
右对齐 "right"

在设置时，必须将WebVTT 提示文本对齐设置为上表中某行第一个单元格 给出的值，该行第二个单元格与新值区分大小写匹配。

text 属性在获取时，必须返回 VTTCue 对象 所表示的WebVTT 提示的原始 提示 文本。在设置时，必须将提示 文本设置为新值。

getCueAsHTML() 方法必须通过将WebVTT 提示文本 DOM 构造规则应用于 对提示文本应用 WebVTT 提示文本解析规则的结果， 将提示文本转换为 由入口设置对象指定的 负责 文档的 DocumentFragment。

getCueAsHTML() 没有提供回退语言，因为 DocumentFragment 无法公开语言信息。

9.2. VTTRegion 接口

以下接口用于在 DOM API 中公开 WebVTT 区域：

enum ScrollSetting { "" /* none */, "up" };
[Exposed=Window]
interface VTTRegion {
  constructor();
  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 属性在获取时，必须返回 VTTRegion 对象所表示的WebVTT 区域的WebVTT 区域 标识符。在设置时，必须将 WebVTT 区域标识符设置为新值。

width 属性在获取时，必须返回 VTTRegion 对象所表示的WebVTT 区域的WebVTT 区域宽度。在设置时， 如果新值为负数或大于 100，则必须抛出 IndexSizeError 异常。否则，必须将WebVTT 区域宽度设置为新值。

lines 属性在获取时，必须返回 VTTRegion 对象所表示的WebVTT 区域的WebVTT 区域行数。在设置时， 必须将WebVTT 区域 行数设置为新值。

regionAnchorX 属性在获取时，必须返回 VTTRegion 对象所表示的WebVTT 区域的WebVTT 区域 锚点 X 偏移。 在设置时，如果新值为负数或大于 100，则必须抛出 IndexSizeError 异常。否则，必须将WebVTT 区域锚点 X 距离设置为 新值。

regionAnchorY 属性在获取时，必须返回 VTTRegion 对象所表示的WebVTT 区域的 WebVTT 区域 锚点 Y 偏移。在设置时，如果新值为负数或大于 100，则必须抛出 IndexSizeError 异常。否则，必须将WebVTT 区域锚点 Y 距离设置为 新值。

viewportAnchorX 属性在获取时，必须返回 VTTRegion 对象所表示的WebVTT 区域的 WebVTT 区域视口锚点 X 偏移。在设置时，如果新值为负数或大于 100，则必须抛出 IndexSizeError 异常。否则，必须将WebVTT 区域视口锚点 X 距离设置为新值。

viewportAnchorY 属性在获取时，必须返回 VTTRegion 对象所表示的WebVTT 区域的 WebVTT 区域视口锚点 Y 偏移。在设置时，如果新值为负数或大于 100，则必须抛出 IndexSizeError 异常。否则，必须将WebVTT 区域视口锚点 Y 距离设置为新值。

scroll 属性在获取时，必须返回 下表中某行第二个单元格中的字符串，该行第一个单元格是 VTTRegion 对象所表示的WebVTT 区域的 WebVTT 区域滚动 设置：

WebVTT 区域滚动 scroll 值
无 ""（空字符串）
向上 "up"

在设置时，必须将WebVTT 区域滚动设置为上表中某行第一个单元格 给出的值，该行第二个单元格与新值区分大小写匹配。

10. IANA 考虑事项

10.1. text/vtt

此注册供社区审查，并将提交给 IESG 进行审查、批准以及 向 IANA 注册。

类型名称：
text
子类型名称：
vtt
必需参数：
N/A
可选参数：
N/A
编码考虑事项：
8bit（始终为 UTF-8）
安全考虑事项：

文本轨道文件本身不会造成直接风险，除非数据中包含敏感信息。 然而，实现需要在处理文本轨道时遵循特定规则，以确保某些基于源的限制得到遵守。 未能正确实现这些规则可能导致信息泄露、跨站脚本攻击等。

互操作性考虑事项：

本规范定义了处理符合要求和不符合要求内容的规则。

已发布规范：
本文档即为相关规范。
使用此媒体类型的应用：
Web 浏览器和其他视频播放器。
其他信息：
魔数：

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"， 最后是空格、制表符、换行符，或文件结束。）

文件扩展名：
"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 对象 模型不会暴露给脚本，并且除了 ::before 和 ::after 之外，无法通过 getComputedStyle() API 获取伪元素的计算样式。[CSSOM]

与脚本相关的安全

WebVTT 不包含也不启用脚本。用户代理不支持执行嵌入在 WebVTT 文件中的脚本的 方式，这一点很重要。

然而，可以构造并交付一个文件，它不是为了呈现说明文字 或字幕，而是为了向脚本系统提供定时输入（“触发器”）。编写不良的脚本 或脚本系统可能因此造成安全、隐私或其他问题； 不过，这一考虑实际上适用于脚本系统。由于 WebVTT 会在其时间戳处提供这些 触发器，恶意文件可能会非常快速地呈现此类触发器，从而可能 导致不当的资源消耗。

偏好的隐私

选择并导致下载或解释 WebVTT 文件的用户代理，可能向 源服务器表明用户需要说明文字或字幕，以及用户对说明文字或 字幕的语言偏好。 这是关于用户的一小部分信息。然而，提供说明文字 文件以及是否检索和使用它的选择，实际上是进行该提供的格式或 协议（例如 HTML 元素）的特征，而不是说明文字格式本身的特征。 [HTML]

致谢

感谢 SubRip 社区，特别是 Zuggy 和 ai4spam，感谢他们在 SubRip 软件程序方面的工作，该程序的 SRT 文件格式被用作 WebVTT 文本轨道文件 格式的基础。

感谢 Ian Hickson 以及许多其他人为 HTML 标准所做的工作，WebVTT 最初就是在其中 规定的。[HTML]

感谢 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, Ed.; M. Davis, Ed.. Tags for Identifying Languages. September 2009. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc5646
[BIDI]
Manish Goregaokar मनीष गोरेगांवकर; Robin Leroy. Unicode Bidirectional Algorithm. 13 August 2025. Unicode Standard Annex #9. URL: https://www.unicode.org/reports/tr9/tr9-51.html
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. URL: https://drafts.csswg.org/css-align/
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. URL: https://drafts.csswg.org/css-backgrounds/
[CSS-CASCADE-6]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 6. URL: https://drafts.csswg.org/css-cascade-6/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou. CSS Color Module Level 4. URL: https://drafts.csswg.org/css-color-4/
[CSS-DISPLAY-3]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 3. URL: https://drafts.csswg.org/css-display/
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. URL: https://drafts.csswg.org/css-display-4/
[CSS-FLEXBOX-1]
Elika Etemad; Tab Atkins Jr.; Rossen Atanassov. CSS Flexible Box Layout Module Level 1. URL: https://drafts.csswg.org/css-flexbox/
[CSS-FLEXBOX-2]
CSS Flexible Box Layout Module Level 2. Editor's Draft. URL: https://drafts.csswg.org/css-flexbox-2/
[CSS-FONTS-4]
Chris Lilley. CSS Fonts Module Level 4. URL: https://drafts.csswg.org/css-fonts-4/
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. URL: https://drafts.csswg.org/css-overflow-3/
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr.. CSS Positioned Layout Module Level 3. URL: https://drafts.csswg.org/css-position-3/
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS Box Sizing Module Level 3. URL: https://drafts.csswg.org/css-sizing-3/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. URL: https://drafts.csswg.org/css-syntax/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS Text Module Level 3. URL: https://drafts.csswg.org/css-text-3/
[CSS-TEXT-4]
Elika Etemad; et al. CSS Text Module Level 4. URL: https://drafts.csswg.org/css-text-4/
[CSS-TEXT-DECOR-4]
Elika Etemad; Koji Ishii. CSS Text Decoration Module Level 4. URL: https://drafts.csswg.org/css-text-decor-4/
[CSS-TRANSITIONS-1]
Chris Marrin; et al. CSS Transitions Module Level 1. URL: https://drafts.csswg.org/css-transitions/
[CSS-UI-4]
Tab Atkins Jr.; Florian Rivoal. CSS Basic User Interface Module Level 4. URL: https://drafts.csswg.org/css-ui-4/
[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. URL: https://drafts.csswg.org/css-writing-modes-3/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. URL: https://drafts.csswg.org/css-writing-modes-4/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. URL: https://drafts.csswg.org/css2/
[CSS22]
Bert Bos. Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification. URL: https://drafts.csswg.org/css2/
[CSS3-COLOR]
Tantek Çelik; Chris Lilley; David Baron. CSS Color Module Level 3. URL: https://drafts.csswg.org/css-color-3/
[CSS3-RUBY]
Elika Etemad; et al. CSS Ruby Annotation Layout Module Level 1. URL: https://drafts.csswg.org/css-ruby-1/
[CSSOM]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). URL: https://drafts.csswg.org/cssom/
[DOM]
Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra Standard. Living Standard. URL: https://infra.spec.whatwg.org/
[MIMESNIFF]
Gordon P. Hemsley. MIME Sniffing Standard. Living Standard. URL: https://mimesniff.spec.whatwg.org/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[RFC3629]
F. Yergeau. UTF-8, a transformation format of ISO 10646. November 2003. Internet Standard. URL: https://www.rfc-editor.org/rfc/rfc3629
[SELECTORS-3]
Tantek Çelik; et al. Selectors Level 3. URL: https://drafts.csswg.org/selectors-3/
[SELECTORS4]
Elika Etemad; Tab Atkins Jr.. Selectors Level 4. URL: https://drafts.csswg.org/selectors/
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/

非规范性参考文献

[MAUR]
Shane McCarron; Michael Cooper; Mark Sadecki. Media Accessibility User Requirements. WD. URL: https://www.w3.org/TR/media-accessibility-reqs/
[WCAG20]
Ben Caldwell; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. 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]
interface VTTCue : TextTrackCue {
  constructor(double startTime, unrestricted double endTime, DOMString text);
  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]
interface VTTRegion {
  constructor();
  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;
};