必须设kind="subtitles"才能在字幕菜单显示;srclang须为标准BCP 47码(如zh、en-US);VTT首行必须顶格全大写WEBVTT、无BOM、时间戳毫秒三位、服务器返回text/vtt MIME类型。

track元素的kind属性必须设为subtitles才能加载字幕
浏览器只识别 kind="subtitles" 的 <track> 作为可切换字幕,设成 captions(带音效描述)、descriptions 或其他值都不会在字幕菜单里显示。中英双语字幕要分别用两个 <track>,各自指定 srclang 和 label。
中英文track必须用不同srclang且匹配浏览器语言设置
srclang 值必须是标准 BCP 47 语言标签,比如中文用 zh 或 zh-CN,英文用 en 或 en-US。浏览器字幕菜单是否默认选中某条,取决于用户系统/浏览器语言设置和 srclang 是否精确匹配——zh 能匹配简体中文环境,但 zh-TW 在大陆系统里通常不会自动激活。
<track kind="subtitles" srclang="zh" label="中文" src="zh.vtt"><track kind="subtitles" srclang="en" label="English" src="en.vtt">
VTT文件格式出错会导致字幕完全不显示
哪怕 HTML 结构全对,只要 VTT 文件第一行不是 WEBVTT(注意大小写、无空格、无BOM),或者时间戳格式错误(如用逗号分隔毫秒:00:00:01,234 是对的,00:00:01.234 是错的),浏览器就会静默忽略该 track。常见坑:
- 用记事本保存 VTT 文件时默认加了 UTF-8 BOM,导致解析失败 → 改用 VS Code 或 Notepad++ 保存为「UTF-8 无 BOM」
- 中文字符没转义或编码不对 → 确保 VTT 文件声明
WEBVTT<U+FEFF>后紧跟换行,且整体用 UTF-8 编码 - 时间轴重叠或顺序错乱 → 浏览器可能跳过整段,建议用
vtt-validator工具校验
Chrome/Firefox 对多track的默认行为不一致
Chrome 会记住用户上次手动选择的字幕语言,并在下次播放时恢复;Firefox 则更依赖 srclang 与系统语言的匹配度,且不保存偏好。如果希望中文字幕默认启用,可以在 JS 中主动调用 video.textTracks[0].mode = "showing",但要注意:只有 DOM 加载完成、track 已加载完毕后才能操作,否则 textTracks 可能为空或 mode 不可写。
立即学习“前端免费学习笔记(深入)”;
真正容易被忽略的是:字幕文件路径必须可跨域访问(同源或服务端配了 Access-Control-Allow-Origin),否则控制台报 Failed to load resource,但 <track> 标签本身不会报错,字幕就悄无声息地消失了。



















