如何将SRT转换为VTT：网页视频字幕完全指南 | AllSubConverter
如果你曾在网页上嵌入视频后发现字幕怎么也加载不出来，罪魁祸首几乎总是格式问题。网上流传的字幕文件大多是 SRT 格式，但浏览器需要的是 VTT。本指南将解释原因，并教你如何在几秒钟内将 SRT 转换为 VTT。
为什么网页播放器需要 VTT
HTML5 的 <video> 元素在设计时就考虑了无障碍访问，它提供了 <track> 子元素用于显示字幕和隐藏式字幕。但问题是，<track> 元素官方只支持一种文本轨道格式：WebVTT（Web 视频文本轨道）。
如果你直接把 .srt 文件指向 <track>，大多数浏览器会直接忽略它。字幕按钮虽然出现，文件也下载了，但什么都不显示。这就是为什么对于任何在网页上发布视频的人来说，格式转换都是不可回避的一步。
简单来说：HTML5 只认 VTT。如果你提供的是 SRT，字幕就等于隐形。
SRT 与 VTT 的差异
这两种格式看起来很相似，文本内容通常也完全一致。差异虽小，但要求非常严格：
| 方面 | SRT | VTT |
|---|---|---|
| 文件头 | 无 | 必须以 WEBVTT 开头 |
| 时间分隔符 | 毫秒前用逗号（00:01:02,500） |
毫秒前用句点（00:01:02.500） |
| 序号 | 必须有（1、2、3……） | 可选 |
| 字幕设置 | 不支持 | 支持（align:center line:90%） |
| 内联样式 | 不支持 | 支持 <b>、<i>、<u> |
其中两条时间戳规则是导致播放失败的关键。浏览器解析 VTT 时期望毫秒分隔符是句点，如果遇到 SRT 使用的逗号，整个字幕块就会被当作格式错误而跳过。
WEBVTT 文件头要求
每个有效的 VTT 文件都必须在第一行以 WEBVTT 字符串开头，后面跟一个空行。如果没有这个文件头，浏览器会直接拒绝整个文件。一个最小的 VTT 文件如下：
WEBVTT
00:00:01.000 --> 00:00:04.000
欢迎回到本系列节目。
00:00:04.500 --> 00:00:07.000
今天我们来转换网页字幕。对比一下 SRT 格式，它有序号且时间戳用逗号分隔：
1
00:00:01,000 --> 00:00:04,000
欢迎回到本系列节目。
2
00:00:04,500 --> 00:00:07,000
今天我们来转换网页字幕。步骤详解：SRT 转 VTT
- 打开转换器。进入 SRT 转 VTT 工具。无需安装或注册。
- 上传你的 SRT 文件。拖放文件、粘贴文本，或从设备中选择。支持批量处理多个文件。
- 运行转换。工具会自动插入
WEBVTT文件头，将所有逗号时间戳分隔符替换为句点，并规范化字幕格式。 - 下载 VTT 文件。复制结果或保存到视频旁边，使用相同的文件名让浏览器自动关联。
- 接入播放器。在
<track>元素中引用文件即可。
一个典型的 HTML5 配置如下：
<video controls>
<source src="intro.mp4" type="video/mp4">
<track label="中文" kind="subtitles"
srclang="zh" src="intro.vtt" default>
</video>浏览器兼容性的好处
转换为 VTT 不仅仅是为了通过解析器检查，它还解锁了真正的浏览器功能：
- Chrome、Firefox、Safari 和 Edge 中原生字幕控件，无需任何 JavaScript
- 通过
kind="captions"属性，屏幕阅读器可识别无障碍字幕 - 支持从右到左和垂直书写模式
- 通过
kind="chapters"实现章节标记 - 逐条字幕定位，可以将字幕推离画面中的文字区域
VTT 还能与 Video.js、Plyr、Shaka Player 和 YouTube IFrame API 等主流网页播放器完美配合，一份转换后的文件即可同时用于自定义播放器和现成播放器。
常见陷阱
- 重复文件头。如果源文件已有一行多余的
WEBVTT，简单的复制粘贴可能产生两行。转换器会自动去重。 - BOM 和编码问题。VTT 文件应以 UTF-8 无 BOM 格式保存，否则某些播放器会误读文件头。
- MIME 类型。文件应以
text/vtt类型提供。严格的浏览器会拦截application/octet-stream类型的文件。 - CORS。当 VTT 文件与页面不同域时，服务器必须发送正确的 CORS 头，否则字幕会静默失败。
如果你需要反方向操作，为桌面播放器或电视获取纯文本字幕，可以阅读我们的 VTT 转 SRT 指南。