结论:标签本身不维护多语言,它只声明轨道;真正需维护的是webvtt文件、srclang值一致性、服务端mime类型及js切换逻辑——任一环节出错,字幕菜单即失效。

直接说结论:<track></track> 标签本身不维护多语言,它只声明轨道;真正需要维护的是 WebVTT 文件、srclang 值一致性、服务端 MIME 类型,以及 JS 切换逻辑——漏掉任一环,用户就看不到对应语言的字幕菜单。
WebVTT 文件必须按语言拆分且格式零容错
每个语言一个 .vtt 文件,不是“一份文件里写多语种”,浏览器不解析嵌套语言。常见错误是把中英混排进同一份 VTT,指望靠 CSS 或 JS 拆分——无效。
- 首行必须是顶格、全大写、无空格、无 BOM 的
WEBVTT,写成webvtt或WEBVTT(末尾空格)都会静默失败 - 时间戳严格为
00:01:23.456 --> 00:01:25.789:小时/分/秒两位,毫秒三位,箭头前后各一个空格 - 中文/日文/阿拉伯文等需 UTF-8 无 BOM 编码,Windows 记事本默认带 BOM,务必用 VS Code 保存为 “UTF-8 without BOM”
- 内容里不能写
<b></b>或<i></i>,Safari 会原样输出;如需样式,用::cue或<c.zh></c.zh>+ CSS 控制
srclang 必须与文件实际语言一致且合法
srclang 不是给人看的备注,而是浏览器匹配系统语言或用户手动选择的唯一依据。拼错、用错格式,等于该轨道在 UI 中“不存在”。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 简体中文用
zh-Hans,不是zh-CN(虽部分浏览器兼容,但 BCP 47 规范推荐前者) - 繁体中文用
zh-Hant,不是zh-TW或Chinese - 英文必须是
en,不是eng、english或空值 - 同一视频内所有
srclang值不能重复,否则第二个起会被忽略
<track></track> 必须作为 <video></video> 直接子元素且位置固定
浏览器只在 <video></video> 开始标签后、所有 <source></source> 闭合后、 前解析 <track></track>。放错位置,video.textTracks.length 就是 0,控制台不报错,调试器里也看不到轨道。
- 错误写法:
<div><track src="zh.vtt"></track></div>、<track></track>写在<source></source>前、写在外 - 正确结构:
<video><source src="x.mp4"><track kind="subtitles" srclang="zh" src="zh.vtt"><track kind="subtitles" srclang="en" src="en.vtt"></track></track></source></video> - JS 动态插入
<track></track>无效——必须随 HTML 一起加载,不能appendChild到已渲染的<video></video>
服务端响应头和本地开发环境最容易被忽略
即使 HTML 和 VTT 全对,.vtt 文件返回 text/plain 或走 file:// 协议,字幕照样不加载。这不是前端代码问题,是部署或开发流程问题。
- 服务器必须返回
Content-Type: text/vtt,Apache/Nginx 需显式配置,IIS 要加 MIME 类型映射 - 本地开发时禁用
file://协议预览:Chrome/Firefox 默认阻止跨文件请求,npx serve、python3 -m http.server或 VS Code Live Server 是刚需 - 检查 Network 面板:确认
zh.vtt请求状态码为 200,Response Headers 含Content-Type: text/vtt - 跨域场景下,服务端还需返回
Access-Control-Allow-Origin: *,否则 Safari 直接拒绝加载
真正麻烦的不是写几个 <track></track> 标签,而是每新增一种语言,就要同步验证四件事:VTT 文件是否合规、srclang 是否准确、路径是否可访问、服务端是否返回正确 MIME 类型——少验一项,那个语言就永远不出现在字幕菜单里。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










