HTML5 视频怎么添加 VTT 字幕轨

视频能播、字幕却不显示时，先分清是文件没加载，还是当前播放位置没有字幕。下面的最小示例可以分别验证这两件事。

让播放器找到语言轨

将最终版视频和 UTF-8 编码的 VTT 放在同一站点，在 video 标签内部添加 track。相对路径按网页地址解析。srclang 填字幕文字的语言：英文对白配中文字幕，轨道语言就是中文。每种语言单独设置 label；包含必要声音说明的同语字幕可使用 captions。

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

先搭一个只挂一条字幕轨的测试页

下载示例字幕和下方英文演示视频，在测试服务器上把两份文件和 HTML 页面放到同一目录。照抄代码时请分别命名为 lesson.mp4 和 example-en.vtt，再用网页地址打开。直接双击本地 HTML，浏览器的文件访问限制会干扰判断。

样例只保留工作坊通知，开场几句没有字幕是正常的。暂停在第 8 秒，逐字核对屏上的英文；跳到第 13 秒，它应该已经消失。如果关掉字幕后文字还在，检查是否还挂着另一条轨道，或画面本身已压入字幕。

字幕菜单为空时追踪文件请求

打开浏览器开发者工具的“网络”面板，刷新页面并选择英文字幕，查找 .vtt 请求。如果没有请求，检查已发布页面里的 video 元素，编辑器保存时可能删掉了 track。若有请求，比较完整网址和上传目录，课程子目录里的相对路径可能与测试页不同。

打开响应正文，确认开头是 WEBVTT，接着有空行和时间码。即使状态是 200，登录页的 HTML 也不能作为字幕。遇到跨域报错时，先把同一文件放在页面同源地址测试；若能播放，再检查媒体服务器允许的来源和 video 的 crossorigin 设置。

根据偏移规律找到对应剪辑点

找三句不看字幕也容易辨认的对白，分别记下实际开口时间和字幕起点。三句偏移相同，先检查新增片头；前两句对、第三句晚，则检查后两句之间的剪辑。偏差逐渐变大时，先确认播放器实际加载的是哪一版视频。

在正式页面逐个切换字幕语言，核对一句熟悉的台词，然后关闭字幕。如果屏上仍有字，对照原画面判断是否已烧录。报告问题时附上视频文件名、所选字幕轨和出错的播放时间，同事就能重现。

查看流程样例

示例来自 EasySub 自编脚本的英文合成语音。这里将原始 SRT 第 3 条改写为 VTT 示范，保留原文与时间点；不是本次工作台实测导出，也不是专业人工精校稿。

WEBVTT

3
00:00:07.950 --> 00:00:12.149
Our next workshop starts on June 15 at 9:30.

WebVTT · EN · 下载演示视频 · 原文 SRT（英文）

用一条字幕验证全流程

在播放器中选中 English，跳到第 8 秒，应看到例句；到第 13 秒，这条字幕应已消失。完全看不到时，直接打开字幕地址，检查返回内容是否以 WEBVTT 开头。状态码 200 也可能返回登录页。服务器应以 text/vtt 提供文件；跨域托管另查 video 的 crossorigin 设置和服务端 CORS 响应。