WebVTT字幕格式

[时间:2019-05] [状态:Open]
[关键词:字幕,vtt,webvtt, 文件格式,cue,css]

0 引言

WebVTT(Web Video Text Tracks),通过HTML5中的元素来标记额外的文字轨资源。其早期版本是基于SRT格式的,轻量级、基于XML的标准,故又名WebSRT(Web Subtitle Resource Tracks)。在2011年改为WebVTT,并在HTML5草案报告中发布。目前WebVTT标准依然是处于草案阶段,但其基本功能已被多数浏览器支持。
我接触到WebVTT是因为HLS中字幕流默认都是WebVTT格式,可外挂多国字幕,简单方便,并支持被HTML5所支持。

本文将主要包含以下内容:

  • 基本文件格式
  • webvtt和srt对比

1 WebVTT文件结构

WebVTT文件是一个以UTF-8编码,以.vtt为文件扩展名的简单文本文件。其MIME类型为text/vttRFC3629

WebVTT文件的各部分构成及顺序如下:


  • 可选的BOM头(BYTE ORDER MARK)
  • "WEBVTT"字符串
  • 可选的空格字符(0x20, SPACE)或者制表符(0x09,TAB),后面可跟任意数目的非LF/CR(0x0A/0x0D)字符
  • 至少两个行结束符
  • 0到多个区域定义块(region definition blocks)、样式块(style block)或注释块(comment block)(相邻的块之间使用行结束符分割)
  • 0到多个行结束符
  • 0到多个cue blocks(提示信息块)和注释块(相邻的块使用行结束符分割)
  • 0到多个行结束符

其中行结束符包括以下三种类型:

  • 双字符-CRLF (0x0A 0x0D) -- windows风格换行符 \r\n
  • 单个LF(0x0A)字符 \r
  • 单个CR(0x0D)字符 \n

从上述的WebVTT基本结构来看,可以通过开头的WEBVTT字符串来判断该文件是否是WebVTT格式。

后续部分将逐个介绍上面提到的各种块结构。
但请注意除了-->和换行之外,你可以在文本头中使用任何的字符。

2 提示信息块 (cue block)

cue是WebVTT文件中最核心的字幕信息块,其具体结构及定义顺序如下:

  • 可选的cur标识符以及单个行结束符
  • cue时间标记 + 单个行结束符
  • 可选的一个或多个空格符或制表符后跟多个cue settings列表
  • 单个行结束符
  • cue负载:字符串,不可包含任意"-->"子串 + 单个行结束符
  • 行结束符

我们基本可以认为一个cue block即是一个独立的subtitle。

cue标识符可以是任意长度的字符,但其中不能包含-->和换行符。并且需要保证该标识符在当前文件内全局唯一,它可在脚本或CSS中直接引用。

cue时间标记的基本格式如下:
[hh:]mm:ss.uuu --> [hh:]mm:ss.uuu
其中hh小时是可选的;mm是分钟数,有效范围[0, 59];ss是秒数,有效范围[0, 59];uuu是毫秒数,三位,不足三位前面填充0。"-->"前后可以添加任意数量的空格符或者制表符。

cue settings列表包含一到多个cue setting,相邻的cue setting使用空格或制表符分隔。每个cue setting包含以下组件:

  • cue setting名
  • 可选的冒号符(0x3A)
  • 可选的cue setting值

下表是目前支持的所有cue setting

名称 name 取值及备注
vertical text cue setting "vertical" 可取值'rl'或'lr'。日语中常用的文本排版方式垂直排版,用于指定左右起始位置
line cue setting "line" 可取值两种:
- 可选的字符串值,"start", "center", "end"
- 相对值,百分比(20.5%)或行数(-15)
position cue setting "position" 可取值两种:
- 百分比
- 指定类型字符串,"line-left", "center", "line-right"
size cue setting "size" 百分比
alignment cue setting "align" "start", "center", "end", "left", "right"
region cue setting "region" region标识符

cue负载有多重类型,可以是多行,但不能是空行,否则就认为是下一个块了。其中文本支持以下HTML标签:

  • 斜体标签()

  • 加粗标签()

  • 下划线标签()

  • 时间戳标签

    00:00:18.500 --> 00:00:20.500
    Like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie
    时间戳标签将一句字幕分隔成多个部分,可以用于实现卡拉OK字幕的效果。

典型的cue块内容如下:

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

3 注释块

注释是用于对WebVTT文件添加信息的可选组件。注释主要为了阅读文件内容,并不显示给用户。注释可以包括换行符,但不能有空白行即两个连续的换行符,那代表着注释结束。
注释不能包含字符串-–>

一个注释块由三部分组成:

  1. NOTE字符串
  2. 一个或多个空格/制表符或单个换行符
  3. 0个或多个字符 + 行结束符,表示注释的内容
  4. 行结束符

典型的注释块如下:

NOTE
- 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

4 区域定义块

区域定义块包含以下构成:

  1. The string "REGION"字符串
  2. 0或多个空格符或制表符
  3. 单个行结束符
  4. region settings列表
  5. 行结束符

region settings列表包含0到多个下表中的组件,顺序随意,相邻组件使用空格符/制表符/行结束符分割,但字符串中不能出现两个连续行结束符。同时需要确保每个组件最多出现一次。

组件名 关键字 取值及描述
region identifier setting "id" 可取值任意字符,但不能包含空格符及"-->"子串,例如id:region_left
region width setting "width" 取值为百分数,例如width:65.2%
region lines setting "lines" 取值为整数,例如lines:36
region anchor setting "regionanchor" 类坐标点,取值为百分数,例如regionanchor:(9.8%,6.7%)
region viewport anchor setting "viewportanchor" 类坐标点,取值为百分数,同上
region scroll setting "scroll" 目前仅支持"up"

其具体含义建议参考WebVTT标准文档。

5 样式块

样式块中定了基于CSS的扩展支持。其基本构成如下:

  1. "STYLE"字符串
  2. 0到多个空格符或制表符
  3. 单个行结束符
  4. 字符序列(可换行,但不能有空行,并且不包含"-->"字符串)。这些字符串表示CSS样式列表,其具体含义在CSS标准中定义
  5. 行结束符(至少一个空行)

下面是一个示例:

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.

上面例子给出了如何用CSS样式来控制对应字幕的显示。

6 SRT与VTT的区别

WebVTT相比SRT有以下不同:

  • WebVTT的首行必须是WEBVTT(在可选的UTF-8 BOM后面)
  • 在首行和第一个cue之间预留了可选的头数据
  • 时间码的分隔符使用点号而不是逗号
  • 时间码中的小时是可选的
  • 时间码前面的帧序号或标识符是可选的
  • 以NOTE开头的都被识别为注释
  • 支持JSON格式的Metadata信息
  • 可指定Chapter信息
  • 仅支持UTF-8
  • Cue settings支持自定义的显示位置

7 小结

本文简要整理了WebVTT文件格式的主要构成以及其中几个关键部件。WebVTT跟SRT类似,只是功能上有一定扩展,并且很好的被HTML5支持,在前端开发中也有一定应用。HLS外挂字幕也是以VTT为主,所以在实际应用中还是值得了解下的。

7.1 参考资料

  1. w3c-webvtt
  2. wiki-webvtt
  3. webvtt介绍

----------------------------------------------------------------------------------------------------------------------------
本文作者:Tocy e-mail: zyvj@qq.com
版权所有@2015-2020,请勿用于商业用途,转载请注明原文地址。本人保留所有权利。
posted @ 2019-07-31 21:47  Tocy  阅读(7097)  评论(1编辑  收藏  举报