WebVTT 字幕

2023-08-13 06:14| 来源: 网络整理| 查看: 265

0 引言 WebVTT(Web Video Text Tracks)，通过HTML5中的元素来标记额外的文字轨资源。其早期版本是基于SRT格式的，轻量级、基于XML的标准，故又名WebSRT(Web Subtitle Resource Tracks)。在2011年改为WebVTT，并在HTML5草案报告中发布。目前WebVTT标准依然是处于草案阶段，但其基本功能已被多数浏览器支持。

HLS中字幕流默认都是WebVTT格式，可外挂多国字幕，简单方便，并支持被HTML5所支持。

1 WebVTT文件结构 WebVTT文件是一个以UTF-8编码，以.vtt为文件扩展名的简单文本文件。其MIME类型为text/vtt。 RFC3629。 WebVTT文件的各部分构成及顺序如下：

可选的BOM头（BYTE ORDER MARK）"WEBVTT"字符串WEBVTT 右侧的可选文本标题。 WEBVTT 后必须至少有一个空格。您可以使用它向文件添加描述。您可以在文本标题中使用除换行符或字符串“–>”之外的任何内容。一个空行，相当于两个连续的换行符。零个或多个cue或备注。零个或多个空行。

示例 1 - 最简单的 WebVTT 文件

WEBVTT

示例 2 - 带有头部的非常简单的 WebVTT 文件

WEBVTT - This file has no cues.

示例 3 - 带有头部和cue的常见 WebVTT 示例

WEBVTT - This file has cues. 14 00:01:14.815 --> 00:01:18.114 - What? - Where are we now? 15 00:01:18.171 --> 00:01:20.991 - This is big bat country. 16 00:01:21.058 --> 00:01:23.868 - [ Bats Screeching ] - They won't get in your hair. They're after the bugs.

Text前加- 可以表示不同人说话 2 cue 块（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 在这里插入图片描述

默认Line

在这里插入图片描述 Line: 3% vertical:lr line:3% vertical:lr line:97% Cue settings

00:00:05.000 --> 00:00:10.000 00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start 00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end

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

斜体标签(text)加粗标签(text)下划线标签(text)注音标签(text)注音文本标签(text) 東京とうきょう

在这里插入图片描述语音标签()

WEBVTT STYLE ::cue(v[voice="Esme"]) { color: cyan; } ::cue(v[voice="Mary"]) { color: pink; } 00:00.000 --> 00:02.000 It’s a blue apple tree! 00:02.000 --> 00:04.000 No way! 时间戳标签 00:00:18.500 --> 00:00:20.500 Like a big-a pizza pie 时间戳标签将一句字幕分隔成多个部分，可以用于实现卡拉OK字幕的效果。典型的cue块内容如下：

Class tag 通过class tag使用样式 3 注释块NOTE 注释是用于对WebVTT文件添加信息的可选组件。注释主要为了阅读文件内容，并不显示给用户。注释可以包括换行符，但不能有空白行即两个连续的换行符，那代表着注释结束。注释不能包含字符串-–>。一个注释块由三部分组成：

NOTE字符串一个或多个空格/制表符或单个换行符0个或多个字符 + 行结束符，表示注释的内容行结束符示例 4 - 常见的 WebVTT 示例 NOTE This is a comment

示例 5 - 多行注释

NOTE One comment that is spanning more than one line. NOTE You can also make a comment across more than one line this way.

示例 6 - 常见注释用法

WEBVTT - Translation of that film I like NOTE This translation was done by Kyle so that some friends can watch it with their parents. 1 00:02:15.000 --> 00:02:20.000 - Ta en kopp varmt te. - Det är inte varmt. 2 00:02:20.000 --> 00:02:25.000 - Har en kopp te. - Det smakar som te. NOTE This last line may not translate well. 3 00:02:25.000 --> 00:02:30.000 - Ta en kopp

4 区域定义块区域定义块包含以下构成：

The string "REGION"字符串0或多个空格符或制表符单个行结束符region settings列表行结束符 region settings列表包含0到多个下表中的组件，顺序随意，相邻组件使用空格符/制表符/行结束符分割，但字符串中不能出现两个连续行结束符。同时需要确保每个组件最多出现一次。在这里插入图片描述

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 world. NOTE style blocks cannot appear after the first cue.

在这里，所有视频元素的样式都使用灰色线性渐变作为背景，前景色为“papayawhip”。此外，使用 元素加粗的文本颜色为“peachpuff”。也可以使用识别符定义样式

WEBVTT STYLE ::cue(#\31) { color: lime; } ::cue(#crédit\ de\ transcription) { color: red; } hello 00:00:00.000 --> 00:00:10.000 Hello world. NOTE style blocks cannot appear after the first cue.

还支持文本轨道的定位，通过在提示中的计时之后包含定位信息，如下所示（有关更多信息，请参阅提示设置）：

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? 多重字幕可以用class实现两个语言字幕 WebVTT STYLE ::cue(sub-lang) { // 指定副字幕的字体大小，位置，样式 } 00:00.000 --> 00:02.000 这是一株蓝苹果树！ It’s a blue apple tree!

SRT与VTT的区别 WebVTT相比SRT有更丰富的结构和样式：

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

【本文地址】

公司简介

联系我们