一、WebVTT文件格式
你可以点击链接查看WebVTT的Demo：https://demo.lyz810.com/webVTT/
WebVTT的MIME类型为text/vtt
一个WebVTT文件可以包含单行或多行的提示，例如
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.
二、WebVTT文件内容
WebVTT的结构由以下几部分构成，其中一些是可选的，它们的顺序如下：
-
- 可选的BOM头
- 字符串WEBVTT
- 可选的文本头在WEBVTT的右侧：
1. WEBVTT后至少有一个空格
2. 你可以通过这个文本头来描述这个文件
3. 除了“–>”和换行之外，你可以在文本头中使用任何的字符 - 一个空白行
- 0个或多个提示或注释
- 0个或多个空白行
WebVTT的内部结构
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.
NOTE This is the last line in the file每一个提示信息中：
- 第一行起始是一个时间，表示文字出现的时间
- 然后在同一行中是一个字符串–>
- 接下来是第二个时间，表示相关的文字结束的时间
- 可以有一个或多个以-开头的行，每一行都包含一个显示的文字轨
我们也可以在vtt文件中加入一些注释，用来帮助我们记起文件中的重要信息部分。这些信息需要放在单独的行中，以NOTE开头，如上例中的NOTE This is the last line in the file
注意，每一条字幕不能包含空白行，否则会认为该条字幕已经结束了
三、WebVTT注释
注释是用于对WebVTT文件添加信息的可选组件。注释主要为了阅读文件内容，是不显示给用户的。注释可以包括换行符，但不能有空白行即两个连续的换行符，那代表着注释结束。
注释不能包含字符串“ –>”，和符号（＆）或小于号（<）。 如果你想使用这些字符，你需要使用例如＆amp; 或＆lt; 等。 建议对>也用>以免跟标签混淆。
一个注释由三部分组成：
1. NOTE字符串
2. 一个空格或新行
3. 0个或多个字符，表示注释的内容
NOTE Another comment that is spanning more than one line. NOTE You can also make a comment across more than one line this way.
四、字幕样式
可以通过控制::cue伪元素来控制字幕的样式
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}在这里，所有video元素的字幕背景为灰色渐变，文字颜色是papayawhip，使用<b>标签的字幕颜色为peachpuff
五、字幕时间
字幕时间的开始时间必须小于结束时间，并且开始时间必须大于等于前面的字幕的任何开始时间，时间可以重叠。但如果track的kind属性值是chapters，则时间不能重叠。
时间格式支持两种：
1. mm:ss.ttt
2. hh:mm:ss.ttt
六、字幕设置
有五种可以设置的属性：
1. vertical 竖向字幕
vertical:rl 从右向左
vertical:lr 从左向右
2. line
指定垂直方向从哪里开始显示字幕，如果设置了vertical则表示水平方向从哪里开始显示字幕；
值可以是一个行数，行高是视频出现的第一个字幕的行高，整数表示从上往下数，负数相反；
值还可以是一个百分比，范围必须在0%~100%之间
3. position
指定水平方向从哪里开始显示字幕，如果设置了vertical则表示文字从竖直方向显示的位置，值是一个0%~100%的百分比，一般配合align使用
4. size
指定字幕的宽度，如果是vertical，则为字幕的高度，值为0%~100%的百分比
5. align
指定字幕的对齐方式，有start、middle、end三种
七、文字标签
- 时间戳标签
00:00:18.500 --> 00:00:20.500 Like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie时间戳标签将一句字幕分隔成多个部分，可以用于实现卡拉OK字幕的效果
- 类标签(<c></c>)
<c.classname>text</c>可以使用CSS中的classname
- 倾斜标签(<i></i>)
用于倾斜文本 - 加粗标签(<b></b>)
- 下划线标签(<u></u>)
- ruby标签(<ruby></ruby>)
用于显示ruby字符，例如拼音等 - ruby文字标签(<rt></rt>)
- 语音标签(<v></v>)
与class相似，主要用于css区分，例如用不同的样式区分不同人的对白