<track kind="subtitles"> 单独使用无效，必须同时指定 srclang、label 和合法 src 指向 UTF-8 无 BOM 的 .vtt 文件，且 <track> 必须嵌在 <video> 内、<source> 之后，否则浏览器静默忽略。
video 标签里 kind="subtitles" 的正确写法
直接写 <track kind="subtitles"> 是没用的，浏览器不会自动加载或显示字幕——必须配合 srclang 和 label，且 src 必须是合法可访问的 Web 字幕文件（通常是 .vtt）。
常见错误是把 SRT 当成 VTT 用，或者漏掉 srclang（导致字幕在设置里不出现），又或者 src 路径 404 却没检查控制台报错。
-
srclang必须是标准语言代码，比如"zh"、"en"、"ja"，不能写"chinese"或"english" -
label是用户在播放器字幕菜单里看到的名称，可以自定义，比如label="中文（简体）" - 所有
<track>必须放在<video>开始标签和<source>之间，顺序无关，但放错位置（比如闭合</video>后）会被忽略
多语言字幕怎么同时加进一个 video 元素
每个语言对应一个 <track>，只要 srclang 不同，浏览器就会把它们列为可选字幕。用户点击播放器字幕按钮就能切换。
注意：不是所有浏览器都默认开启字幕，首次加载时字幕通常处于“关闭”状态，需要用户手动启用；也不能靠 JS 自动触发显示（出于无障碍策略限制），但可以用 video.textTracks[0].mode = "showing" 强制激活某一条（仅限用户已交互过的页面）。
立即学习“前端免费学习笔记（深入）”；
<video controls width="640"> <source src="movie.mp4" type="video/mp4"> <track kind="subtitles" srclang="zh" label="中文" src="sub-zh.vtt"> <track kind="subtitles" srclang="en" label="English" src="sub-en.vtt"> <track kind="subtitles" srclang="ja" label="日本語" src="sub-ja.vtt"> </video>
VTT 文件格式不合规会导致字幕完全不加载
浏览器对 .vtt 文件格式非常严格：第一行必须是 WEBVTT（全大写，无空格、无 BOM），之后至少一个空行，再写字幕块。哪怕多一个 UTF-8 BOM 或首行写成 webvtt，Chrome / Safari 都会静默失败。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
常见坑：
– 用记事本保存 VTT 容易带 BOM，推荐用 VS Code 或 Sublime 保存为 UTF-8 without BOM
– 时间戳格式必须是 00:00:01.234 --> 00:00:03.456，不能用逗号分隔毫秒
– 每个字幕块之间必须有空行，否则后续块被忽略
验证方式：直接在浏览器地址栏打开 sub-zh.vtt URL，如果看到纯文本且时间轴正常渲染，说明格式基本过关；如果空白或报错，大概率是编码或语法问题。
为什么字幕菜单里看不到某个语言选项
最常被忽略的是 srclang 值未被浏览器识别，比如写了 srclang="zhs"（非标准）、srclang="cn"（应为 zh），或该 track 的 src 返回了 404/403（网络面板能看到请求失败，但播放器 UI 不提示）。
另一个隐蔽问题是：多个 <track> 的 srclang 相同（比如两个都写 zh），浏览器只认第一个，其余被丢弃——这时即使 label 不同，菜单里也只显示一项。
- 用 DevTools 的 Network 面板过滤
vtt，确认每个字幕文件都成功返回 200 - 检查
video.textTracks数组长度是否等于你写的<track>数量（在控制台执行） - 如果
textTracks[i].language是空字符串，说明srclang无效
字幕加载和激活是异步的，textTracks 列表可能延迟几毫秒才更新，别在 video 加载完就立刻查 length。
