HTML5视频字幕动态切换需通过设置textTracks中TextTrack对象的mode属性实现，将目标轨道设为"showing"、其余设为"disabled"，且所有必须预先在HTML中声明并含正确kind、srclang、label和src属性。
HTML5 中 video 字幕轨道的动态语言切换，核心是操作 textTracks 列表中各 TextTrack 对象的 mode 属性，而不是修改 src 或手动隐藏 DOM 元素。
确保 HTML 中已声明所有语言轨道
必须在 <video></video> 标签内预先写好每个语言对应的 <track></track>，且属性完整：
-
kind="subtitles"（不能省略或拼错） -
srclang使用标准 BCP 47 码，如zh、en-US、ja -
label是用户可见名称，如“中文”“English” -
src指向可访问的 WebVTT 文件（需同源或配置 CORS）
示例结构：
<video id="myVideo" controls> <source src="movie.mp4" type="video/mp4"> <track kind="subtitles" srclang="zh" label="中文" src="zh.vtt" default> <track kind="subtitles" srclang="en" label="English" src="en.vtt"> <track kind="subtitles" srclang="ja" label="日本語" src="ja.vtt"> </video>
用 JS 控制 mode 属性实现切换
浏览器只允许一个字幕轨道处于 "showing" 状态；其余应设为 "disabled"（不是 "hidden"，后者不生效）：
立即学习“前端免费学习笔记（深入）”；
-
track.mode = "showing"：启用并渲染该轨道 -
track.mode = "disabled"：彻底关闭（不解析、不触发事件） -
track.mode = "hidden"：不显示但仍在解析，一般不用
切换函数示例：
function switchSubtitle(lang) {
const video = document.getElementById('myVideo');
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');
// 切换到日文
switchSubtitle('ja');
处理加载状态与错误防护
直接设 mode = "showing" 前，建议确认轨道已加载完成，避免静默失败：
- 检查
track.readyState === 2（即TextTrack.LOADED） - 监听
track.onload或video.textTracks.onaddtrack（适用于动态添加） - 跨域 VTT 需服务端返回
Access-Control-Allow-Origin: *
增强版切换逻辑：
function safeSwitch(lang) {
const video = document.getElementById('myVideo');
const tracks = video.textTracks;
for (let i = 0; i < tracks.length; i++) {
const track = tracks[i];
if (track.kind !== 'subtitles') continue;
if (track.srclang === lang && track.readyState === 2) {
track.mode = 'showing';
} else {
track.mode = 'disabled';
}
}
}
动态添加轨道（无预置 track 标签时）
若字幕 URL 来自接口，可用 JS 创建并注入：
- 调用
video.addTextTrack('subtitles', '中文', 'zh')创建空轨道 - 用
fetch加载 VTT 内容，解析后逐条调用track.addCue(cue) - 完成后手动设
track.mode = 'showing' - 注意：
addTextTrack返回的轨道默认mode = "disabled"，且不支持直接改src
