TextTrack.mode 设为 "disabled" 才算真正隐藏字幕;"hidden" 非法,会报错或被忽略;仅 kind 为 "subtitles" 或 "captions" 的 track 支持 mode 切换;遍历 textTracks 应用 for 循环而非 Array.from().forEach()。

TextTrack.mode 设为 "disabled" 才算真正隐藏
直接设 track.mode = "hidden" 会报错——TextTrack.mode 只接受三个合法值:"disabled"、"hidden"(注意:这是无效值)、"showing"。浏览器遇到 "hidden" 会静默忽略或抛 TypeError,实际状态不变。
真正让字幕不显示且不参与渲染的唯一方式是设为 "disabled"。它和 CSS 的 display: none 类似:彻底退出时间轴匹配,不触发 cuechange,也不占用布局(虽然 track 本身没布局,但 cue 渲染链被切断)。
-
"showing":字幕可见,且随视频时间轴自动激活/停用 cue -
"disabled":完全禁用,cue 不渲染、不监听、不响应时间变化 -
"hidden":不是标准值,不要用;部分旧文档误写,已废弃
切换前必须确认 track.kind 是 "subtitles" 或 "captions"
不是所有 都能切出字幕效果。只有 kind="subtitles"、"captions"、"descriptions" 这三类才支持 mode 切换并影响视觉呈现。kind="metadata" 或 "chapters" 的 track 即使设 mode = "showing",也不会渲染到页面上。
常见错误是遍历所有 video.textTracks 后统一设 mode,结果把章节 track 也设了,既无意义又可能干扰逻辑。
- 先过滤:
if (track.kind === "subtitles" || track.kind === "captions") - 避免对
kind === "metadata"的 track 调用mode赋值 - 注意大小写:
track.kind返回小写字符串,别写成"Subtitles"
用 for 循环比 Array.from().forEach() 更安全
video.textTracks 是动态列表(TextTrackList),不是真数组。用 Array.from(video.textTracks).forEach() 会创建快照,之后新增的 track 不会被后续操作覆盖;而 for 循环每次读取的是实时 length 和索引,能响应动态插入。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
尤其在字幕异步加载(比如 fetch 后用 addTextTrack())场景下,这个差异会导致新 track 永远无法被控制。
- 推荐写法:
for (let i = 0; i - 不要依赖
Array.from()或扩展运算符[...video.textTracks] - 如果必须用函数式,改用
video.textTracks.forEach()(现代浏览器已支持)
mode 变更不会触发事件,状态需业务自行维护
TextTrackList 有 addtrack 和 removetrack,单个 TextTrack 有 oncuechange,但 mode 改变时——无论 JS 赋值还是用户点击字幕菜单——**都不触发任何事件**。
这意味着 UI 上的“当前启用语言”标识、按钮选中态、localStorage 缓存等,全得靠你手动同步。漏掉这步,用户切完字幕,界面上的勾选标记还停在上一个语言。
- 每次设
track.mode后,立刻更新对应 UI 元素的 class 或data-active - 从 localStorage 读取上次选择时,要遍历 track 并显式设
mode,不能只改 UI - 别指望监听
texttrack事件来捕获 mode 变更——它根本不存在
真正隐藏 track 的动作极轻量,但配套的状态管理容易被跳过。多数 bug 不出在 mode = "disabled" 这一行,而出现在“以为设了就完了”的那一秒。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










