HTML5视频字幕动态切换需通过设置textTracks中TextTrack对象的mode属性实现，将目标轨道设为"showing"、其余设为"disabled"，且所有必须预先在HTML中声明并含正确kind、srclang、label和src属性。
HTML5 中 video 字幕轨道的动态语言切换，核心是操作 textTracks 列表中各 TextTrack 对象的 mode 属性，而不是修改 src 或手动隐藏 DOM 元素。
确保 HTML 中已声明所有语言轨道
必须在 标签内预先写好每个语言对应的 ，且属性完整：
-
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"></track></track></track></source></video>
用 JS 控制 mode 属性实现切换
浏览器只允许一个字幕轨道处于 "showing" 状态；其余应设为 "disabled"（不是 "hidden"，后者不生效）：
-
track.mode = "showing"：启用并渲染该轨道 -
track.mode = "disabled"：彻底关闭（不解析、不触发事件） -
track.mode = "hidden"：不显示但仍在解析，一般不用
切换函数示例：
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
<h3>动态添加轨道（无预置 track 标签时）</h3>
<p>若字幕 URL 来自接口，可用 JS 创建并注入：</p>
- 调用
video.addTextTrack('subtitles', '中文', 'zh')创建空轨道 - 用
fetch加载 VTT 内容，解析后逐条调用track.addCue(cue) - 完成后手动设
track.mode = 'showing' - 注意：
addTextTrack返回的轨道默认mode = "disabled"，且不支持直接改src
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
