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/vtt
。 RFC3629。
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文件添加信息的可选组件。注释主要为了阅读文件内容,并不显示给用户。注释可以包括换行符,但不能有空白行即两个连续的换行符,那代表着注释结束。
注释不能包含字符串-–>
。
一个注释块由三部分组成:
NOTE
字符串- 一个或多个空格/制表符或单个换行符
- 0个或多个字符 + 行结束符,表示注释的内容
- 行结束符
典型的注释块如下:
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 区域定义块
区域定义块包含以下构成:
- The string "REGION"字符串
- 0或多个空格符或制表符
- 单个行结束符
- region settings列表
- 行结束符
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的扩展支持。其基本构成如下:
- "STYLE"字符串
- 0到多个空格符或制表符
- 单个行结束符
- 字符序列(可换行,但不能有空行,并且不包含"-->"字符串)。这些字符串表示CSS样式列表,其具体含义在CSS标准中定义
- 行结束符(至少一个空行)
下面是一个示例:
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 参考资料
WebVTT字幕格式的更多相关文章
- webvtt字幕转srt字幕的python程序(附改名程序)
最近写了两个比较简单的python程序,原有都是由于看公开课感觉比较费劲,一个是下载的视频无用的名字太长,另一个就是下载的vtt字幕播放器不识别,写了一个vtt转换成str字幕格式的文件 vtt to ...
- web视频添加webvtt字幕测试
1.使用MP4硬字幕,如下, 2.使用HTML5 添加webvtt字幕,可惜到现在还没有测试成功.
- ASS/SSA字幕格式
[时间:2019-04] [状态:Open] [关键词:字幕,ASS,SSA,文件格式,v4 Styles,字幕特效] 0 引言 SubStation Alpha(Sub Station Alpha) ...
- SRT字幕格式
[时间:2019-03] [状态:Open] [关键词:字幕,SRT,文件格式] 0 引言 视频文件中最简单.最常见的外挂字幕格式是SRT(SubRip Text).本人找了好久也没找到类似的标准文档 ...
- FFmpeg基础库编程开发学习笔记——音频常见格式及字幕格式
声明一下:这些关于ffmpeg的文章仅仅是用于记录我的学习历程和以便于以后查阅,文章中的一些文字可能是直接摘自于其它文章.书籍或者文献,学习ffmpeg相关知识是为了使用在Android上,我也才是刚 ...
- 虎牙直播弹幕转换字幕格式 基于Node.js 的 huya-danmu
1 首先安装nodejs运行环境, 从 http://nodejs.cn/download/ 下载对应的版本 2 安装 huya-danmu 模块, https://github.com/BacooT ...
- 歌词字幕转换制作专家转换LRC-UTF,出错问题,乱码问题,格式问题
我使用歌词字幕转换制作专家把LRC字幕格式转换成UTF格式后竟然是乱码,求助怎么解决. 编码问题... 转换之前,要先把它处理成ANSI码.先用记事本打开lrc,然后文件-> 另存为,在对话框下 ...
- WebVTT 及 HTML5 <track> 元素简介
https://dev.opera.com/articles/zh-cn/an-introduction-to-webvtt-and-track/ 简介 网络视频文本轨道,简称为 WebVTT, 是一 ...
- Html5-Video标签以及字幕subtitles和captions的区别
<video id="mainvideo" src="video.mp4" type="video/mp4"controls auto ...
随机推荐
- nginx配置代理时参数说明
- 来吧!一文彻底搞定Vue组件!
作者 | Jeskson 来源 | 达达前端小酒馆 Vue组件的概述 组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么. 事件通信的那些事 如何了解父子 ...
- [LeetCode] 210. Course Schedule II 课程清单之二
There are a total of n courses you have to take, labeled from 0 to n-1. Some courses may have prereq ...
- JS存取Cookies值
这里对cookie进行了说明,也介绍了几个方法,但是我要取我存的cookie时取不到,他的方法只是针对存的 名字-值,不涉及键,所以自己写了个方法,来满足我的需求. 封装了简单存取Cookie: / ...
- Loj #3124. 「CTS2019 | CTSC2019」氪金手游
Loj #3124. 「CTS2019 | CTSC2019」氪金手游 题目描述 小刘同学是一个喜欢氪金手游的男孩子. 他最近迷上了一个新游戏,游戏的内容就是不断地抽卡.现在已知: - 卡池里总共有 ...
- ThinkPHP连接Oracle数据库的详细教程
一. 操作环境搭建 系统:Windows7 旗舰版 64位PHP环境:wampserver2.2e-php5.4.3-httpd2.2.22-mysql5.5.24 32位版ThinkPHP:3.0正 ...
- mgcp的alg功能实现
刚吃了一碗还算正宗的潮汕牛筋丸粿条和一颗卤蛋,算是给自己的生日礼物. 这一周工作只围绕了一个主题“mgcp的alg功能实现”. 1. 应用场景: 一台运行mgcp语音协议的终端设备,经过一台路由器到达 ...
- ant-design-pro引用css
ant-design-pro中默认只能引用less文件,引用了css文件也是无效的.所以需要在配置文件config.js中找到 cssLoaderOptions,在 getLocalIdent中加入 ...
- Installing Google Chrome in Linux(RedHat Enterprise Linux 7)
# wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm # yum -y install r ...
- IntelliJ idea 撤回(已经commit未push的)操作
VSC => Git => reset head => 退回到上次commit => 退回到第2次提交之前 => 退回到指定commit版本