标签无法同步多路视频字幕，必须手动通过video.textTracks管理多个TextTrack实例并独立校准时间轴，流媒体字幕需由hls.js/dash.js解析后注入。
<track></track> 标签本身不能同步多路视频字幕——它只负责挂载单个字幕轨道到单个 <video></video> 元素，且对 HLS/DASH 流媒体完全失效。
你真正需要的不是“用标签同步”，而是「让多个视频元素共享同一套字幕时间轴，并精确渲染」。这必须绕过 <track></track> 的声明式逻辑，手动控制 video.textTracks 和 cue 渲染时机。
video.textTracks 是唯一可控入口，但得自己管理生命周期
浏览器只认 video.textTracks 里的 TextTrack 对象，无论字幕来自外挂 VTT 还是流内提取。但：
-
addTextTrack()必须在video已插入 DOM 且触发loadedmetadata后调用，否则返回的轨道对象可能被播放器忽略 - 多个
<video></video>元素不能共用同一个TextTrack实例（DOM 规范限制） - 每个
video都要单独创建、注入、激活轨道，且时间校准必须各自独立做
示例：为两个视频同步添加同一份中文字幕
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const v1 = document.getElementById('video1');
const v2 = document.getElementById('video2');
<p>// 等待元数据加载完成
Promise.all([
new Promise(r => v1.addEventListener('loadedmetadata', r, { once: true })),
new Promise(r => v2.addEventListener('loadedmetadata', r, { once: true }))
]).then(() => {
const track1 = v1.addTextTrack('subtitles', '中文', 'zh');
const track2 = v2.addTextTrack('subtitles', '中文', 'zh');</p><p>// 手动加载并解析 VTT 内容（不能靠 src 自动加载）
fetch('zh.vtt').then(r => r.text()).then(vttText => {
parseVTT(vttText).forEach(cue => {
track1.addCue(new VTTCue(cue.start, cue.end, cue.text));
track2.addCue(new VTTCue(cue.start, cue.end, cue.text));
});</p><pre class='brush:php;toolbar:false;'>// 激活前先设为 disabled，避免竞态
track1.mode = 'disabled';
track2.mode = 'disabled';}); });
切换语言时必须显式禁用旧轨道，否则渲染错乱
多个 TextTrack 同时设为 mode = "showing" 会导致浏览器渲染不可预测（尤其 Chrome），常见现象是字幕重叠、闪烁或完全不出现：
- 每次切换前，遍历
video.textTracks，把所有kind === "subtitles"的轨道设为"disabled" - 新轨道
addCue()完毕后，再设mode = "showing" - 不要用
default属性——它只在页面首次加载时生效，无法响应运行时切换
列表操作建议：
- 用
Array.from(video.textTracks).filter(t => t.kind === 'subtitles')获取当前字幕轨道 - 切换前统一执行
t.mode = 'disabled'，不要依赖removeCue() - 若需保留历史字幕（如双语对照），应使用自定义 DOM 渲染层，而非依赖原生
textTracks
流媒体字幕必须由 hls.js/dash.js 解析后手动注入
HLS 的 EXT-X-MEDIA:TYPE=SUBTITLES 或 DASH 的 TTML 轨道，浏览器原生 <track></track> 完全不识别：
-
hls.js默认不加载任何字幕轨道，需显式设置hls.subtitleTrack = index并监听HLS.SUBTITLE_TRACKS_UPDATED事件 -
dash.js需启用配置caption: { enable: true }，且仅支持 WebVTT 载荷；若原始是 TTML，必须 JS 解析转成 VTT 字符串再调用addTextTrack() - 所有注入都必须发生在
hls.attachMedia(video)或player.attachView(video)之后，否则video.textTracks尚未就绪
关键陷阱：
- 直接写
<track src="sub.vtt"></track>和流媒体共存时，该轨道和流内字幕完全隔离，不会自动对齐时间轴 - 流字幕常带 PTS 偏移（如 +200ms），不能直接用原始时间戳，需从
hls.subtitleStreamController或dash.metrics.Metrics.getMetricsFor('subtitle')中提取实际解码时间
多视频同步字幕最难的不是“加进去”，而是“每个视频都保持毫秒级一致”。哪怕一个视频因网络卡顿丢了一帧，它的 textTrack.activeCues 就可能滞后 40ms —— 此时你得靠 requestVideoFrameCallback 或 Worker 做帧级补偿，而不是指望 <track></track> 标签自动搞定。
