应使用 JavaScript 动态注入 track，确保在 DOMContentLoaded 时遍历 data-subtitles 视频，按规范插入为 video 直接子元素，统一管理路径与属性，并解决本地协议、MIME 类型、跨域及 controls 属性等显示问题。
多个 video 标签怎么批量加 track？别用复制粘贴
直接复制同一段 <track></track> 块到每个 <video></video> 里，短期能跑，但维护成本爆炸：改一个字幕路径要手动同步 N 处，漏改一处就静默失效。真正可维护的做法是用 JavaScript 动态注入，且必须在 DOM 加载完成、<video></video> 已存在但尚未开始播放时执行。
- 不能等
window.onload——此时视频可能已加载完毕，<track></track>插入后浏览器不识别 - 推荐用
document.addEventListener('DOMContentLoaded', ...)或$(document).ready()（如果用了 jQuery） - 遍历所有目标
<video></video>时，用querySelectorAll('video[data-subtitles]')比无差别扫全部更安全，避免干扰第三方视频组件
动态插入 track 必须满足的 HTML 结构硬约束
JavaScript 创建的 <track></track> 元素，依然要遵守浏览器对嵌套位置的铁律：它必须是 <video></video> 的**直接子元素**，且必须出现在所有 <source></source> 之后、 之前。用 appendChild() 直接加到 <video></video> 末尾是错的——如果视频里已有 <source></source>，新 <track></track> 会插在 和 之间，这刚好符合要求；但如果视频没 <source></source>（比如 src 写在 <video></video> 标签上），就得用 insertBefore(track, video.firstElementChild) 或先判断最后一个 <source></source> 的位置。
- 不能用
innerHTML += '<track ...>'</track>——会触发整个 video 子树重解析，已加载的视频流可能中断 - 不能把
<track></track>塞进包裹<video></video>的<div> 里——浏览器只认 video 直接子元素<li>动态插入后，需手动调用 <code>video.load()（仅当视频尚未播放过）或video.textTracks才会更新
如何统一管理多语言 track 的属性和路径
把语言配置抽成 JS 对象，比在每个 <video></video> 上写一堆 data- 属性更清晰。例如：
生成可在 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' }
];
- 每个
<video></video>可通过data-subtitle-base="/sub/"指定公共路径前缀，避免硬编码重复 -
default字段只允许一个为true，JS 层要主动检查并确保全局唯一，否则多个default会让所有轨道失效 - 生成
<track></track>时，四个属性kind、srclang、label、src缺一不可，漏掉任意一个，该轨道就不会出现在右键菜单里
为什么本地开发时批量 track 总是不显示？重点查这三点
批量配置后字幕菜单为空，90% 是环境问题，不是代码逻辑错。
立即学习“前端免费学习笔记（深入）”；
-
file://协议下所有src请求返回 0 状态码 → 浏览器拒绝加载，必须起本地服务（如npx serve） - VTT 文件被当成
text/plain返回 → 检查服务器是否配置了text/vttMIME 类型（Nginx 加types { text/vtt vtt; }） - 多个视频共用同一份 VTT，但其中某个
<video></video>跨域了 → 需确保服务端返回Access-Control-Allow-Origin: *，否则video.textTracks里看不到该轨道
最易被忽略的是：移动端 Safari 要求 <video></video> 必须带 controls 属性，否则字幕菜单压根不出现，哪怕 track 全部合法也无效。
