video标签中添加track元素需满足：必须为video直接子元素；kind="subtitles"；srclang为合法BCP 47码（如"zh"）；VTT文件首行为WEBVTT且UTF-8无BOM；JS切换字幕需设track.mode为"showing"/"disabled"。
video 标签里怎么加 track 元素才生效
浏览器只认特定结构和属性的 track，漏掉任意一个关键点，字幕就完全不显示。最常见的是忘了设 kind="subtitles" 或没配 srclang。
-
track必须是video的直接子元素，不能套在div里 -
kind值必须是"subtitles"（不是"caption"或空字符串），否则 Chrome/Firefox 默认忽略 -
srclang必须是合法 BCP 47 语言码，比如"zh"、"en"、"ja"，写成"ch"或"english"就失效 -
label推荐加上，不然浏览器下拉菜单里可能只显示“字幕”两个字，用户分不清哪条是中文哪条是英文
示例：
<video controls><source src="movie.mp4" type="video/mp4"><track kind="subtitles" label="中文" srclang="zh" src="zh.vtt" default><track kind="subtitles" label="English" srclang="en" src="en.vtt"></track></track></source></video>
VTT 文件格式错在哪导致字幕不加载
浏览器对 VTT 文件极其敏感，哪怕一个空格或编码不对，整个文件都会静默失败——控制台通常不报错，但字幕就是不出来。
- 文件必须以
WEBVTT开头，且单独占第一行，前面不能有 BOM、空行或空格 - 时间戳格式必须是
HH:MM:SS.mmm --> HH:MM:SS.mmm，中间两个空格，毫秒必须三位，写成00:01:23.4或00:01:23.4000都会失败 - 文件编码必须是 UTF-8 无 BOM；用 VS Code 保存时选 “UTF-8” 而非 “UTF-8 with BOM”
- 路径必须能被 video 页面同源访问；如果 VTT 放在其他域名或用了相对路径但页面 URL 有 hash（如
page.html#section），路径解析可能出错
一个最小可用 VTT 片段：
WEBVTT 00:00:01.000 --> 00:00:04.000 你好，这是中文标题 00:00:05.000 --> 00:00:08.000 Hello, this is English
怎么用 JS 动态切换 track 的启用状态
靠 HTML 的 default 属性只能设初始状态，真要支持用户点击切换语言，得用 JS 控制 track 元素的 mode 属性。
-
track.mode只有三个合法值："disabled"、"hidden"、"showing"；设成true/false或"on"都无效 - 一次只能有一个
track是"showing"，其余必须设为"disabled"，否则浏览器行为不一致（Safari 可能只显示第一个） - 不要用
track.hidden = false，这个属性只控制 DOM 是否渲染，不影响字幕显示逻辑 - 切换前建议先检查
track.readyState === 2（即LOADED），否则刚设置mode就可能因未加载而失败
简单切换函数示例：
function switchSubtitle(lang) {
const tracks = video.querySelectorAll('track[kind="subtitles"]');
tracks.forEach(t => {
t.mode = t.srclang === lang ? 'showing' : 'disabled';
});
}
多语言字幕在 Safari 和旧版 Edge 上为什么总失效
Safari 对 track 的兼容性最苛刻：它要求 VTT 文件必须通过 HTTPS 提供（即使本地 file:// 协议也不行），且对 MIME 类型校验更严；旧版 Edge 则根本不支持 srclang 动态识别。
- Safari 要求服务器返回
Content-Type: text/vtt，用 Nginx/Apache 时需手动配置，否则直接拒绝加载 - 旧版 Edge（≤18）不支持
track.modeAPI，只能靠default属性 + 页面刷新模拟切换，实际项目中基本要放弃支持 - 移动端 iOS Safari 还有个隐藏限制：如果视频是自动播放（
autoplay muted），部分系统版本会禁用字幕渲染，必须用户手势触发播放后才能启用 - 没有 polyfill 能真正补全
track行为，别指望用 JavaScript 模拟字幕层——位置、字体、同步精度都很难对齐原生效果
真要保兼容，核心就一条：所有 VTT 文件必须走 HTTPS + 正确 MIME + 手动验证 Safari 控制台 Network 面板里 status 是 200 且 Type 显示 vtt。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
