Skip to content

SRT 转 VTT 网页字幕在线

将 SubRip 文件转换为适用于网站、YouTube 和 HTML5 视频播放器的 WebVTT。

拖放您的 SRT 文件到这里

或点击浏览

支持最大 50 MB 的 .srt 文件

转换引擎架构

关于 SRT 转 VTT

SRT 是使用最广泛的字幕格式,但浏览器不接受它。HTML5 规范明确要求 <track> 元素使用 WebVTT,所有主流浏览器都强制执行这一要求。本工具完成三项关键转换:将 SRT 的时间戳格式(逗号分隔毫秒)转为 VTT 的点分隔毫秒,添加标准 WEBVTT 文件头,并移除 VTT 不使用的 SRT 条目序号,使字幕可用于网页视频播放。

代码级语法透视

SRT 到 VTT 语法结构与代码转换示例

直观对比转换前后文件头、时间轴标记与对白文本的代码级语法对应关系

毫秒级同步
input.srt
SRT 源格式
1
00:00:01,000 --> 00:00:04,000
Hello, world!
 
2
00:00:04,500 --> 00:00:08,000
This is a subtitle file.
 
3
00:00:08,500 --> 00:00:12,000
Converted locally!
output.vtt
VTT 转换结果
WEBVTT
 
00:00:01.000 --> 00:00:04.000
Hello, world!
 
00:00:04.500 --> 00:00:08.000
This is a subtitle file.
 
00:00:08.500 --> 00:00:12.000
Converted locally!
规范手册

SRT 与 VTT 格式规范深度解析

符合通用标准规范
输入格式

SRT

SRT

SRT(SubRip,.srt)是最常见的纯文本字幕格式。每个条目包含顺序编号、使用逗号分隔毫秒的时间戳行(00:01:30,500 --> 00:01:35,000)以及一行或多行字幕文本。SRT 没有文件头、元数据或标准化样式,但除网页浏览器外几乎兼容所有媒体播放器。

输出格式

VTT

VTT

WebVTT(.vtt)是 W3C 标准字幕格式,以 'WEBVTT' 头部开始,包含 HH:MM:SS.mmm 格式的时间戳、文本以及可选的字幕条目参数。它是 HTML5 <video> 元素的原生字幕格式。

格式差异

SRT 使用逗号(00:01:23,456),VTT 使用点(00:01:23.456)表示毫秒
VTT 文件第一行必须以 'WEBVTT' 头部开始;SRT 无头部要求
VTT 通过字幕条目参数支持 CSS 样式、定位和对齐;SRT 仅纯文本
SRT 为每条字幕条目使用序号;VTT 编号为可选
VTT 支持注释(以 NOTE 开头的行)和元数据块;SRT 不支持
VTT 字幕条目时间戳使用箭头(-->),结束时间戳后可选字幕条目参数;SRT 仅使用箭头

常见疑难与故障排查

针对播放器兼容性、字符乱码与时间轴同步的实操排查指南

4 个常见问题
GOTCHA #1

为什么将 .vtt 引入 HTML5 <track> 标签后字幕不显示或控制台报错?

常见原因有两个:1. 服务器未配置正确的 MIME 类型,需确保 Web 服务器(Nginx/Apache/Cloudflare)将 .vtt 文件作为 'text/vtt; charset=utf-8' 响应;2. 跨域问题(CORS),若字幕文件存放在 CDN 或不同域名下,需在服务端开启 Access-Control-Allow-Origin 允许跨域请求。

GOTCHA #2

网页播放器中字幕随播放越来越滞后或提前(时间轴漂移)?

WebVTT 对时间轴的单调递增性要求极高。如果原始 SRT 存在乱序字幕块或无效时间戳,浏览器解析器会中断后续字幕显示。本工具在转换时会自动按时间戳排序并规整时间区间,彻底杜绝解析崩溃。

GOTCHA #3

SRT 中的颜色或样式标签在 WebVTT 中如何自定义外观?

WebVTT 规范推荐使用现代 Web 标准样式。您可以在网页 CSS 中使用标准伪元素 `video::cue { font-size: 16px; color: #fff; background: rgba(0,0,0,0.8); }` 轻松实现全局自适应美化。

GOTCHA #4

中文在浏览器或移动端网页中显示为乱码(如出现特殊字符或问号)?

HTML5 规范强制要求 WebVTT 文件采用 UTF-8 编码。本工具输出文件已全自动标准化为标准无 BOM 的 UTF-8 编码,确保在 iOS Safari、安卓微信内置浏览器等移动端无乱码问题。

功能特性

快速客户端转换 — 无需等待服务器
无需上传文件到服务器 — 字幕永不离开您的设备
正常处理带 BOM、CRLF 或 LF 行尾的 SRT 文件
支持批量处理:可同时转换多个文件
精确保留所有时间戳和字幕文本
转换在浏览器中完成 — 无需安装字幕软件
输出 UTF-8 编码 VTT,所有现代浏览器和网页播放器均可识别
在浏览器本地处理文件,不上传字幕

为什么需要转换?

HTML5 <video> 元素需要 WebVTT(.vtt)文件作为字幕 — SRT 无法原生支持
YouTube 字幕上传接受保留条目计时的 VTT 文件
Video.js、JW Player 等 JavaScript 视频播放器将 VTT 作为主要字幕格式
VTT 支持 SRT 无法表达的元数据、样式和定位字幕条目
WebVTT 广泛应用于 HTML5 网页视频与浏览器播放器字幕
如果您在网站中嵌入视频或创建网页播放器,VTT 是必需格式
浏览器将 VTT 识别为有效的文本轨道资源并启用原生字幕控件
Scenarios

常见用途

HTML5 视频嵌入

使用 <track src="captions.vtt" srclang="en" kind="subtitles"> 标签在网站的 <video> 元素中添加字幕。浏览器会自动渲染原生字幕控件。

YouTube 字幕上传

将 VTT 文件通过 YouTube Studio 上传为字幕。上传后请检查处理完成的计时和文本。

Video.js、JW Player 和 Plyr

Video.js、JW Player 和 Plyr 等热门 JavaScript 视频播放器使用 VTT 作为默认字幕格式。将 SRT 转换为 VTT 以在这些播放器中启用字幕。

Web 无障碍(WCAG)

WCAG 2.1 成功标准 1.2.2 要求网络视频提供同步字幕。WebVTT 是常用的 W3C 标准格式,但合规还需检查字幕内容、覆盖范围和播放器无障碍表现。

在线课程与远程教育

为 Coursera、Udemy 或您自己的 LMS 上的课程视频添加字幕。VTT 被大多数教育视频播放器支持,可提高非母语用户的可访问性。

Format Ecosystem

相关格式

工作原理

  1. 1

    将 SRT 文件拖放或选择导入工具

  2. 2

    工具立即读取每条字幕条目的编号、时间戳和文本

  3. 3

    SRT 时间戳格式(HH:MM:SS,mmm)被转换为 WebVTT 格式(HH:MM:SS.mmm),并添加必需的 'WEBVTT' 头部

  4. 4

    转换后的 VTT 文件完全在您的浏览器中生成,不会向服务器发送任何数据

  5. 5

    下载生成的 VTT 文件,可用于 HTML5 视频播放器、YouTube 或其他接受 WebVTT 的平台

  6. 6

    每个清理后的条目都会转换为带时间轴和文本的 VTT 字幕块。

  7. 7

    最终的 VTT 内容以 UTF-8 编码,可直接下载。

常见问题

W3C 标准及所有现代浏览器(Chrome、Safari、Edge、Firefox)的 HTML5 <video> 标签仅原生支持 WebVTT(.vtt)。SRT 无法直接在 `<track>` 元素中识别。

唯一区别是毫秒分隔符:SRT 用逗号(00:01:30,500),VTT 用句点(00:01:30.500)。转换器自动把逗号替换为句点,时分秒格式完全一致,时间轴精度不会丢失。

许多网页播放器(HTML5、YouTube、Vimeo)更推荐或只支持 VTT 格式。现代浏览器要求使用 WebVTT 才能在 HTML5 <video> 元素中激活原生字幕控件。

如果问题只是 SRT 与 WebVTT 格式差异,转换可以解决。YouTube 接受 VTT 字幕上传;上传后请检查导入的计时和文本。其他平台报错还可能来自账户、编码或平台要求,需按具体错误排查。

VTT(WebVTT — Web Video Text Tracks)是为网页视频设计的 W3C 标准字幕格式。以 'WEBVTT' 头部开始,支持 CSS 样式、定位、注释和元数据。它是 HTML5 视频的原生字幕格式。

能。部分 SRT 文件(尤其是 Windows 记事本保存的)开头带有 BOM(字节顺序标记)。转换器会自动识别并正确处理带 BOM 的文件,输出的 VTT 不包含多余的 BOM。

准备好转换您的字幕了吗?

将您的 SRT 文件拖放到这里,立即转换为 VTT。