中英文双字幕不显示的主因是track属性缺失或不合规：kind必须为"subtitles"，srclang须用标准BCP 47标签（如zh/en），label非空，src文件需同源或配CORS；WebVTT首行必须顶格大写WEBVTT且无BOM，时间格式严格，编码为UTF-8无BOM。
track 元素本身不“实现切换”，它只声明轨道；真正控制中英文字幕切换的，是浏览器原生菜单 + video.textTracks API 的 mode 属性。写错一个属性、放错一个位置，字幕就根本不会出现在右键菜单里。
为什么中英文 track 在右键菜单里不显示？
最常见原因是四个必需属性缺一不可，且值必须严格合规：
-
kind="subtitles"：不能写成caption、subtitles（末尾空格）、subtitle；captions专用于听力障碍描述，UI 分离，不参与srclang匹配 -
srclang必须用标准 BCP 47 标签：zh或en可以，chinese、english、zh-CN（带连字符但没大写）会失败；多语言场景推荐zh-Hans/en-US -
label是用户看到的名称，不能为空或纯空格；建议写成label="中文(简体)"和label="English"，避免模糊 -
src指向的.vtt文件必须可访问：同源优先；若跨域，服务端必须返回Access-Control-Allow-Origin: *，否则控制台静默报Failed to load resource
WebVTT 文件怎么写才不会被 Chrome/Firefox 忽略？
WebVTT 解析器极其脆弱，错一个字符就整个文件失效：
- 首行必须是顶格、全大写、无空格、无 BOM 的
WEBVTT（不是webvtt，也不是WEBVTT） - 时间格式必须为
00:00:01.234 --> 00:00:04.567：小时/分/秒均两位，毫秒严格三位，中间两个空格，不能用逗号或冒号替代小数点 - 文件编码必须是 UTF-8 无 BOM：Windows 记事本默认带 BOM，务必用 VS Code 或 Notepad++ 选 “UTF-8 without BOM” 保存
- 中文内容直接写，不要转义；但确保服务器返回的 MIME 类型是
text/vtt，不是text/plain或application/octet-stream
如何用 JavaScript 动态切换中英文字幕？
不能改 track.src，也不能只设 default——页面加载后，default 就失效了。正确方式是遍历 textTracks 并设 mode：
function switchSubtitle(lang) {
const video = document.querySelector('video');
for (const track of video.textTracks) {
if (track.kind === 'subtitles') {
track.mode = track.srclang === lang ? 'showing' : 'disabled';
}
}
}
// 调用示例：
switchSubtitle('zh'); // 显示中文
switchSubtitle('en'); // 显示英文
- 注意：该操作只对已预加载的
track生效（即 HTML 中已声明好所有语言的track），不能运行时动态插入新track后立刻启用 - Safari 要求至少有一个
track带default，且kind="subtitles"，否则右键菜单根本不出现「字幕」项 - 切换后，浏览器不会自动滚动到当前时间点的字幕行，如需精确同步，得监听
timeupdate手动触发匹配逻辑
中英双行字幕（翻译+原文）能用两个 track 实现吗？
不能。浏览器一次只激活一个 subtitles 轨道，两个 track 不会叠加显示。
- 正确做法是合并进**单个 VTT 文件**，用
你好 Hello video::cue(.zh)和video::cue(.en) - 慎用
、等标签：Safari 基本不渲染，会原样显示为文本；换行必须用真实 \n，不是 - 如果需要完全自由开关（比如只看英文、只看中文、或都看），就得放弃原生
track，改用 JS 解析两个 VTT 文件，按时间戳对齐后注入自定义 DOM 层——但这意味着放弃原生无障碍支持和系统字体缩放
实际项目里最容易被忽略的，是 WebVTT 文件的 BOM 和首行大小写。这两个问题不会报错，只会让字幕彻底消失，连控制台都安静得像什么都没发生过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
