什么是VTT格式？HTML5官方字幕格式详解

一、VTT是啥？简单说就是“网页专用的字幕格式”

VTT（WebVTT，全称Web Video Text Tracks），是W3C（万维网联盟）为HTML5视频制定的官方字幕格式。2010年前后开始起草，2016年左右成为正式推荐标准。简单理解：VTT就是SRT的“正规军版本”。

在VTT出现之前，浏览器里放视频加字幕很麻烦。各个浏览器支持的格式不一样，有的只认SRT，有的根本不支持外挂字幕。Google、苹果、Mozilla这些浏览器厂商坐下来一商量，决定搞一个统一标准，这就是VTT的由来。

一个标准的VTT文件长这样：

WEBVTT Kind: captions Language: zh NOTE 这是一条注释，不会显示在画面上 00:00:15.200 --> 00:00:18.600 你吃饭了吗？ 00:00:19.000 --> 00:00:22.500 吃过了，你呢？

注意看，VTT和SRT最大的区别是：第一行必须是WEBVTT，后面可以跟一些元数据（比如字幕类型、语言）。时间轴用的是点号分隔毫秒（00:00:15.200），而不是SRT的逗号。其他部分和SRT差不多。

关键点：VTT是HTML5官方标准，所有现代浏览器（Chrome、Edge、Safari、Firefox）都原生支持。你用<video>标签加<track>子标签，就能直接调用VTT字幕，不需要装任何插件。

很多人第一眼看VTT，觉得“这不就是SRT改了个头吗”。实际上VTT多了不少功能，只是大部分普通用户用不到。

VTT支持注释，以NOTE开头，后面的内容不会显示在画面上。你可以用它来记录翻译备注、时间轴调整记录、或者给后期人员留说明。SRT没有这个功能，注释只能写在文件名里或者另存一个文档。

NOTE 这一段是主角内心独白 NOTE 翻译时要体现犹豫的情绪

VTT可以给字幕设置CSS样式，比如颜色、字体大小、位置。你用::cue这个伪元素，就能在CSS里控制字幕显示效果。

/* CSS 里写 */ video::cue { color: yellow; font-size: 24px; }

VTT可以指定字幕显示在屏幕的哪个位置，不一定是底部居中。你可以控制字幕的垂直位置（line）、水平位置（position）、对齐方式（align）。

00:00:15.200 --> 00:00:18.600 line:10% position:20% align:left 这是左上角显示的字幕

VTT不只是给字幕用的。通过设置Kind属性，可以区分不同的轨道类型：subtitles（翻译）、captions（听障）、descriptions（视频描述）、chapters（章节）、metadata（元数据）。

VTT虽然是官方标准，但这么多年了，还是没有完全取代SRT。主要原因是下面几个：

浏览器是原生支持VTT了，但桌面播放器呢？VLC、PotPlayer、MPC-HC这些主流播放器，打开VTT文件没问题，但高级功能（样式、定位、多轨道）基本不支持。大部分播放器还是把VTT当SRT来解析。

SRT可以用记事本打开直接改，VTT也可以，但VTT的注释、样式、定位这些功能，手写容易出错。专门支持VTT的编辑工具不多，很多字幕组还是习惯先做SRT，最后再转成VTT。

VTT因为可以包含注释、样式定义、定位信息，文件体积比同等内容的SRT大10%-30%。对于单个文件来说差别不大，但如果你的网站有几万条字幕，CDN流量成本会高一点。

YouTube、Netflix、B站这些大平台，后台存储的字幕其实是VTT或更复杂的格式（比如TTML），但提供给用户下载的往往是SRT。原因很简单：用户下载SRT是为了在本地播放器里看，而本地播放器对SRT兼容最好。

好消息是，VTT和SRT的互转非常容易，因为两者的核心结构几乎一样。转换只需要处理三个地方：

在线转换：直接搜"VTT to SRT"，一堆免费工具。推荐：Subtitle Tools、Happy Scribe、Convertio。

用软件转换：Aegisub、Subtitle Edit都支持VTT导入导出。操作很简单：打开文件 → 另存为 → 选目标格式。

手动转换：如果只是想快速改几个文件，用记事本打开，做下面几步：

1. 删掉第一行的"WEBVTT"（VTT转SRT时） 或者加上"WEBVTT"（SRT转VTT时） 2. 把所有的点号(.)替换成逗号(,)（VTT转SRT时） 或者把逗号(,)替换成点号(.)（SRT转VTT时） 3. 删掉所有NOTE开头的行和样式相关的内容（VTT转SRT时）

小技巧：如果你不确定转出来的文件对不对，用浏览器打开一个测试HTML文件，里面放一个<video>标签和<track>指向你的VTT字幕。Chrome里能正常显示，就说明没问题。

根据实际需求，我建议这样选择：

总结一句话：网页上用VTT，本地用SRT。如果你不确定对方的使用场景，给SRT是最安全的选择。

VTT是字幕格式里的“官方标准”，功能比SRT强，但普及度不如SRT。这不是技术问题，是生态问题——大家已经习惯了SRT，播放器厂商也懒得改。

对于普通用户来说，你不需要纠结用哪个。如果只是看电影加字幕，继续用SRT就行，省事。如果你是做网站开发，或者需要字幕有样式和多轨道，学一下VTT，浏览器里效果很好。

最后说一句：VTT不是要取代SRT，两者会长期共存。SRT负责“能用”，VTT负责“好用”。各取所需就行。