移动端Safari必须显式添加controls属性且track标签需完整声明kind、srclang、label及正确MIME类型，否则字幕菜单不可见；JS控制前须确保track.readyState为2。
移动端 Safari 必须加 controls 属性才能显示字幕菜单
不加 controls，<track></track> 标签在 iOS Safari 中完全不可见——右键没菜单、设置里没选项、video.textTracks 可能有对象但 mode 永远是 disabled。这不是 bug，是 Safari 的硬性策略：无控件即无用户交互入口。
常见错误写法：<video src="a.mp4"><track kind="subtitles" src="zh.vtt" srclang="zh" label="中文"></track></video> —— 这种写法在 iPhone 上字幕根本不会出现在 UI 里。
- 必须显式写
controls：<video controls src="a.mp4"></video> - 不能靠 JS 后续添加
controls属性，需初始 HTML 就存在 - 微信内置浏览器（X5 内核）部分版本也继承该限制，同样要加
label 和 srclang 缺一不可，否则菜单里直接消失
移动端浏览器（尤其 Safari 和 Chrome for iOS）对 <track></track> 的属性校验比桌面端更严格。漏掉 label 或 srclang，对应轨道不会进入 textTracks 列表的可选集合，连 video.textTracks[i].mode = 'showing' 都无效。
-
srclang必须是合法 BCP 47 码："zh"、"zh-Hans"、"en-US"有效；"chinese"、"zh_CN"、空字符串全部被忽略 -
label建议带语言变体说明，如label="中文(简体)"，避免多个中文轨道时无法区分 -
kind="subtitles"必须全小写、无空格、拼写完整；kind="caption"或kind="subtitles "（末尾空格）均失效
JS 控制字幕前必须等 track.readyState === 2
动态切换字幕或初始化默认轨道时，如果直接操作 track.mode，大概率失败——因为 <track></track> 资源还没加载完成，readyState 还是 0（loading）或 1（loaded），只有到 2（loaded 且解析就绪）才真正可用。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
错误做法：video.textTracks[0].mode = 'showing' 放在 DOMContentLoaded 里执行。
- 正确监听方式：
track.addEventListener('load', () => { if (track.readyState === 2) track.mode = 'showing'; }) - 或轮询：
const check = () => { if (track.readyState === 2) { track.mode = 'showing'; } else setTimeout(check, 100); }; - 注意：移动端网络慢时，
load事件可能延迟数秒，别假设它和canplay同步
安卓和 iOS 的滚动与样式兼容差异极大
移动端字幕弹出层（如 Safari 的字幕选择浮层）无法用 CSS 覆盖样式，也不响应 ::-webkit-scrollbar。真正需要定制 UI 时，只能放弃原生菜单，自己实现字幕面板 + 手动渲染 WebVTT 文本。
- iOS Safari 完全不支持
::-webkit-scrollbar，Android Chrome 支持但仅限于容器滚动条，不影响字幕控件 - 原生字幕文字大小、颜色、背景由系统控制，无法通过
<track></track>或 video 样式干预 - 若需统一视觉，建议 fallback 方案：检测
!('textTracks' in HTMLMediaElement.prototype)或!navigator.userAgent.includes('Safari')后，降级为自定义 div +TextTrackCue监听 +cuechange事件手动更新 DOM
controls 存在、track 位置紧贴 <source></source> 后、kind/srclang/label/src 全显式声明、WebVTT 文件服务端返回 text/vtt MIME 类型。少一个，用户就看不到那个菜单项。 
