WebVTT多语言字幕成功依赖四个环环相扣环节：字幕文件合规（首行WEBVTT、时间格式精确、UTF-8无BOM）、HTML结构准确（track为video直接子元素且位置固定）、属性配置完整（kind、src、srclang、label缺一不可）、浏览器行为理解到位（需用textTracks API控制mode）。
用 `
准备合法的 WebVTT 文件（每个语言一个）
WebVTT 解析器极其严格，容错率几乎为零：
- 首行必须是 全大写、顶格、无空格、无 BOM 的 WEBVTT（写成
webvtt或WebVTT都会失败） - 时间格式必须为
00:00:01.234 --> 00:00:04.567：小时两位、分钟两位、秒两位、毫秒三位，中间两个空格，不能少一位也不能多一位 - 文件编码必须是 UTF-8 且不含 BOM（Windows 记事本默认带 BOM，务必改用 VS Code、Sublime 或 Notepad++ 保存为 “UTF-8 无签名”）
- 中文、阿拉伯文、日文等非拉丁字符需确保在 VTT 中正常显示，避免方块或问号
在 video 标签内正确嵌套 track 元素
- 放在所有
标签之后、 之前 - 不能放在
- 多个
示例结构：
立即学习“前端免费学习笔记（深入）”；
<source src="movie.mp4" type="video/mp4">
<track kind="subtitles" src="zh.vtt" srclang="zh" label="中文(简体)" default>
<track kind="subtitles" src="en.vtt" srclang="en" label="English">
<track kind="subtitles" src="ja.vtt" srclang="ja" label="日本語">
</video>
四个必需属性一个都不能少
浏览器只认显式声明，不接受“默认推断”：
-
kind="subtitles"：必须写全，不能省略，不能写成
caption或subtitles（末尾空格也不行） -
src：指向可访问的 .vtt 文件路径；若跨域，服务端需返回
Access-Control-Allow-Origin: * -
srclang：使用标准 BCP 47 语言码，如
zh-Hans、en-US、ar；写chinese或spanish无效 - label：用户在右键菜单或控件栏看到的名称，建议含括号注明变体，如“中文(繁體)”、“English (UK)”
缺任一属性，该轨道就不会出现在字幕切换菜单中。
实现交互式切换（原生 + JavaScript 双保障）
浏览器自带字幕控件支持手动切换，但要实现点击按钮切换、记忆用户偏好、首次加载自动启用目标语言，需结合 JS：
- 通过
video.textTracks获取所有轨道，遍历比对track.language或track.srclang - 设为显示：
track.mode = 'showing'；关闭：track.mode = 'disabled' - 注意：修改
src属性不会重载字幕，必须预加载所有 - 推荐在
loadedmetadata事件后操作，确保轨道已就绪
简单切换函数示例：
const video = document.querySelector('video');function showSubtitle(lang) {
for (const track of video.textTracks) {
if (track.kind === 'subtitles' && track.srclang === lang) {
track.mode = 'showing';
} else if (track.kind === 'subtitles') {
track.mode = 'disabled';
}
}
}
