video.controls=false不能隐藏字幕按钮而只能隐藏整个控件栏；真正控制字幕显示的是track.mode="disabled"，且需在轨道加载完成后设置，本地开发须启用HTTP服务并确保.vtt文件正确加载。
video.controls=false 不能隐藏字幕按钮，只能隐藏整个控件栏
很多人以为设 video.controls = false 就能“去掉字幕”，其实它只是把播放器所有原生控件（进度条、音量、全屏、字幕按钮）全干掉。如果你仍需要播放/暂停、音量等控件，但只想藏掉字幕开关，这条路走不通。
HTML5 标准里没有 showSubtitlesButton 或类似属性——浏览器不提供细粒度控制单个按钮的开关。
- 写
controls属性 → 显示全部控件（含字幕下拉菜单） - 不写
controls→ 所有控件消失，包括字幕入口 -
video.controls = false动态执行 → 效果同上，不是“隐藏字幕”，是“砍掉整个工具栏”
想保留控件但默认不显示字幕，得靠 track.mode = "disabled"
字幕是否显示，取决于每个 的 mode 状态，而不是按钮显隐。即使字幕按钮在界面上，只要当前激活轨道的 mode 是 "disabled"，就不会出字幕。
关键点：必须等轨道加载完成再操作，否则设置无效。
- 监听
video.textTracks[i].onload，或轮询检查track.readyState === 2（即TextTrack.LOADED） - 设置前确认
track.kind === "subtitles"，避免误操作 captions/descriptions - 示例：
const track = video.textTracks[0];<br>if (track && track.kind === "subtitles") {<br> track.mode = "disabled";<br>} - 注意：多个 subtitles 轨道时，要遍历并设为
"disabled"，否则任一"showing"都会显示
移动端 Safari 不响应 default 属性，且隐藏字幕按钮
Safari on iOS/macOS 默认不渲染字幕按钮（哪怕写了 default），也不触发 textTracks 的自动启用逻辑。这不是 bug，是它的设计策略。
这意味着你不能依赖 default 让字幕“默认关闭”，也不能指望用户点那个根本看不到的按钮。
- 必须自己实现 UI（比如一个「字幕」开关按钮），用 JS 控制
track.mode - 初始化时主动设
track.mode = "disabled"，别等default生效 - 如果用户点了你的自定义开关，记得先
disable其他同 kind 轨道，再设目标为"showing"
本地开发时 .vtt 加载失败，字幕根本不会进 textTracks 列表
用 file:// 协议直接双击打开 HTML 文件，所有 都会静默失败——video.textTracks.length 永远是 0，后续任何 mode 操作都无从谈起。
这不是代码问题，是浏览器安全限制：本地文件协议下，跨源资源（包括同目录下的 .vtt）被拒绝加载，且不报错。
- 必须起本地服务，例如：
python3 -m http.server 8000 - 确保服务器返回
Content-Type: text/vtt，Nginx/Apache 需手动加 MIME 类型配置 - VS Code 中保存 .vtt 时选 “UTF-8 无 BOM”，首行必须是纯
WEBVTT（全大写、无空格、无注释）
字幕是否出现，真正由 track.mode 决定，而不是按钮有没有、default 写没写、甚至 controls 开没开。最容易卡住的地方，是还没等 .vtt 加载完就去设 mode，或者本地开发时压根没跑服务——这两点一错，连调试入口都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
