HTML5视频多语言字幕切换依赖TextTrack API与track元素配合，需手动设置srclang、label及mode属性，通过JavaScript控制textTracks中各轨道的showing状态实现切换。
HTML5视频支持多语言字幕切换，核心是利用TextTrack API 与 track 元素配合实现。关键不在“自动识别”，而在手动控制轨道的mode状态和语言标识。
正确声明双语字幕轨道
在<video>内用多个<track>标签分别定义中、英文轨道，必须设置kind="subtitles"、唯一srclang和可读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"> </video>
注意：default仅指定初始启用轨道，不锁定切换逻辑；浏览器不会自动根据系统语言选轨，需JS干预。
通过textTracks获取并切换轨道
video.textTracks返回TextTrackList，每个轨道是TextTrack对象，其mode属性控制显示状态（"disabled" / "hidden" / "showing"）：
立即学习“前端免费学习笔记（深入）”；
- 设为
"showing"：启用并显示该轨道 - 设为
"disabled"：彻底关闭（不解析、不触发cuechange） - 同一时间仅应有一个字幕轨道处于
"showing"状态
示例切换函数：
function switchSubtitle(lang) {
const tracks = video.textTracks;
for (let i = 0; i < tracks.length; i++) {
if (tracks[i].kind === 'subtitles') {
tracks[i].mode = tracks[i].srclang === lang ? 'showing' : 'disabled';
}
}
}
// 切换到英文
switchSubtitle('en');
动态创建轨道（无需预置track标签）
若字幕URL由接口返回，可用JS动态添加轨道：
- 调用
video.addTextTrack(kind, label, srclang)创建空轨道 - 再用
fetch加载VTT内容，解析后逐条用addCue()注入 - 注意：动态添加的轨道默认
mode="disabled"，需手动设为"showing"
避免直接修改src属性——动态轨道不支持该方式加载外链VTT。
监听字幕状态变化与用户交互
监听textTracks变更或轨道自身事件可增强体验：
-
video.textTracks.onaddtrack：捕获新轨道加入（如动态加载完成） -
track.oncuechange：当前活动轨道cue更新时触发（适合高亮当前句） - 结合
track.mode实时判断当前激活语言，同步UI按钮状态
不要依赖track.readyState轮询——VTT加载完成会自动触发load事件，但需确保<track>已插入DOM后再监听。
