HTML5隐藏式字幕切换本质是控制TextTrack的mode属性：disabled（停用）、hidden（加载但不显示）、showing（实时渲染）；需通过多个<track>预埋多语言轨道，JavaScript显式管理mode状态，一次仅一个showing，其余设disabled。
HTML5 视频中的隐藏式字幕（Closed Captions，CC）切换，本质是控制 TextTrack 对象的 mode 属性，而不是开关某个全局“CC功能”。浏览器不会自动匹配系统语言或记住用户偏好，一切需由 JavaScript 显式管理。
字幕轨道的三种 mode 状态
每个 <track> 元素在 JS 中对应一个 TextTrack 实例，其 mode 决定行为：
-
disabled：轨道完全停用，不解析、不触发
cuechange，也不占用渲染资源（默认初始值） - hidden：轨道保持加载和解析，但不显示字幕（极少使用，一般不用设这个）
- showing：字幕实时渲染并显示在视频画面上（唯一真正“开启”的状态）
多语言字幕的正确声明方式
必须通过 HTML 中多个 <track> 标签预埋不同语言轨道，并确保关键属性齐全：
-
kind="subtitles"或kind="captions"（后者更强调含音效描述，语义更贴近 CC） -
srclang使用标准语言码（如zh、en、ja），不可写ch或cn -
label提供用户可读名称（如 “中文（简体）”、“English”） -
default只影响页面首次加载时哪个轨道默认为showing，不影响后续切换逻辑
切换逻辑的核心实现
一次只让一个字幕轨道处于 showing 状态，其余设为 disabled：
立即学习“前端免费学习笔记（深入）”；
- 遍历
video.textTracks，筛选出kind === 'subtitles'或'captions'的轨道 - 对比每条轨道的
srclang，匹配目标语言后设mode = 'showing' - 其余同类型轨道统一设为
mode = 'disabled' - 无需重载视频、不触发额外事件，修改立即生效
避免常见陷阱
实际开发中容易踩坑的地方：
- 直接操作
<track>的src属性无效——动态加载字幕要用video.addTextTrack()+fetch+addCue() - 监听
textTracks.onaddtrack比轮询readyState更可靠，尤其对 JS 动态添加的轨道 - 不要依赖
video.textTracks[0]—— 轨道顺序不固定，应按srclang或label查找 - 禁用原生 controls 后，字幕按钮仍可能意外出现；建议显式移除
controls属性，并用自定义 UI 控制mode
