应使用 JavaScript 动态注入 track，确保在 DOMContentLoaded 时遍历 data-subtitles 视频，按规范插入为 video 直接子元素，统一管理路径与属性，并解决本地协议、MIME 类型、跨域及 controls 属性等显示问题。

多个 video 标签怎么批量加 track？别用复制粘贴

直接复制同一段 块到每个 里，短期能跑，但维护成本爆炸：改一个字幕路径要手动同步 N 处，漏改一处就静默失效。真正可维护的做法是用 JavaScript 动态注入，且必须在 DOM 加载完成、 已存在但尚未开始播放时执行。

• 不能等 window.onload——此时视频可能已加载完毕， 插入后浏览器不识别
• 推荐用 document.addEventListener('DOMContentLoaded', ...) 或 $(document).ready()（如果用了 jQuery）
• 遍历所有目标 时，用 querySelectorAll('video[data-subtitles]') 比无差别扫全部更安全，避免干扰第三方视频组件

动态插入 track 必须满足的 HTML 结构硬约束

JavaScript 创建的 元素，依然要遵守浏览器对嵌套位置的铁律：它必须是 的**直接子元素**，且必须出现在所有 之后、 之前。用 appendChild() 直接加到 末尾是错的——如果视频里已有 ，新 会插在 和 之间，这刚好符合要求；但如果视频没 （比如 src 写在 标签上），就得用 insertBefore(track, video.firstElementChild) 或先判断最后一个 的位置。

• 不能用 innerHTML += '' ——会触发整个 video 子树重解析，已加载的视频流可能中断
• 不能把 塞进包裹 的
  里——浏览器只认 video 直接子元素
• 动态插入后，需手动调用 video.load()（仅当视频尚未播放过）或 video.textTracks 才会更新

如何统一管理多语言 track 的属性和路径

把语言配置抽成 JS 对象，比在每个 上写一堆 data- 属性更清晰。例如：


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载

const subtitleConfigs = [
  { kind: 'subtitles', srclang: 'zh', label: '中文(简体)', src: '/sub/zh.vtt', default: true },
  { kind: 'subtitles', srclang: 'en', label: 'English', src: '/sub/en.vtt' }
];

• 每个 可通过 data-subtitle-base="/sub/" 指定公共路径前缀，避免硬编码重复
• default 字段只允许一个为 true，JS 层要主动检查并确保全局唯一，否则多个 default 会让所有轨道失效
• 生成 时，四个属性 kind、srclang、label、src 缺一不可，漏掉任意一个，该轨道就不会出现在右键菜单里

为什么本地开发时批量 track 总是不显示？重点查这三点

批量配置后字幕菜单为空，90% 是环境问题，不是代码逻辑错。

• file:// 协议下所有 src 请求返回 0 状态码 → 浏览器拒绝加载，必须起本地服务（如 npx serve）
• VTT 文件被当成 text/plain 返回 → 检查服务器是否配置了 text/vtt MIME 类型（Nginx 加 types { text/vtt vtt; }）
• 多个视频共用同一份 VTT，但其中某个 跨域了 → 需确保服务端返回 Access-Control-Allow-Origin: *，否则 video.textTracks 里看不到该轨道

最易被忽略的是：移动端 Safari 要求 必须带 controls 属性，否则字幕菜单压根不出现，哪怕 track 全部合法也无效。