WebVTT

Cue 的结构

文件由文件头和若干 cue 组成。每个 cue 与 SubRip 的文字块相似，但有两个可选部分。

WEBVTT
 
intro
00:00:23.000 --> 00:00:24.500 line:0
<v Celia>You're a jerk,
<i>Thom</i>.
 

时间码

除 cue 以外的块

Cue 中的文字

颜色

有八种颜色无需任何 CSS 即可使用：white、lime、cyan、red、yellow、magenta、blue 和 black，另外还有对应的 bg_ 版本用于背景。其他颜色需要你自己定义一个类，并写入 STYLE 块：

STYLE
::cue(.gold) { color: #ffd700; }

00:00:30.800 --> 00:00:34.000
<c.gold>Why don't you just admit that</c>

Cue 设置

Subtitld 把 line、position 和 align 读取为字幕在屏幕上的位置，与 SubRip 的 {\an1} 到 {\an9} 相同的九个位置，并以同样的方式写回：顶部为 line:0，中间为 line:50%,center，两侧分别为 position:10% align:start 和 position:90% align:end。

Subtitld 中的 WebVTT

打开 WebVTT 文件

Subtitld 通过时间行找到每个 cue，并会：

• 把文件头、NOTE、STYLE 和 REGION 块识别为其本身，而不是字幕；cue 标识符则作为名称处理；
• 识别带或不带小时、句点或逗号的时间；
• 把语音作为字幕的说话人，便于配音；
• 识别 WebVTT 的颜色类，以及 STYLE 块为其他类定义的颜色；
• 把 line、position 和 align 作为字幕在屏幕上的位置；
• 支持任意编码，尽管 WebVTT 要求使用 UTF-8。

它无法表示的内容会被省略，包括区域、cue 的宽度、竖排文字、注音和卡拉 OK 式时间戳。文字本身会保留。

导出 WebVTT

依次点击 导出，再选择 字幕 和 VTT，可以设置以下选项：

• 文本原文、译文，或两者都要，译文放在下方。
• 说话人名字不写出；放在文字前（Thom：…）；或作为语音标签（<v Thom>），这是 WebVTT 自己的方式。
• 格式保留，或删除。
• 偏移时间把所有字幕整体提前或推后相同的时长。

文件始终为 UTF-8，符合 WebVTT 的要求：先是 WEBVTT，然后是按开始时间排序的 cue，每个时间都带小时。会被当作标记的字符会写成实体形式，空字幕会被省略。

在网页上使用

<video controls src="tears-of-steel.mp4">
  <track kind="subtitles" src="tears-of-steel.en.vtt"
         srclang="en" label="English" default>
</video>

以 text/vtt 类型提供文件。如果视频来自其他域名，视频需要设置 crossorigin，服务器需要返回 Access-Control-Allow-Origin 头，否则浏览器不会加载这条字幕轨道。

WebVTT 还是 SubRip？

播放器、编辑器和上传场景用 SubRip；网页视频用 WebVTT。SubRip 页面把两者放在一起做了对比。

趣闻