track元素不支持双轨同时显示，浏览器仅允许一个subtitles轨道为showing状态；须合并翻译与拼音至单个WebVTT文件，用class分层并配合CSS的::cue(.class)控制双行样式。
track 元素本身不支持双语字幕“同时显示”——浏览器只允许一个 subtitles 轨道处于 showing 状态，两个 track 不会自动叠加。真要实现翻译+拼音/中英并排或上下两行，必须放弃“双 track 并行”的思路，改用单文件分层 + CSS 控制。
为什么不能直接用两个 track 同时启用
浏览器规范强制限制：同一时间最多一个 subtitles 类型的 track 可设为 mode = "showing"。即使你手动把两个都设成 showing，多数浏览器（Chrome、Safari）只会渲染最后一个，或行为未定义。
- 尝试
track1.mode = "showing"; track2.mode = "showing"→ 实际只看到一条字幕，另一条被静默忽略 -
srclang="zh"和srclang="zh-Latn"是合法区分，但仅用于菜单识别和系统语言匹配，不改变渲染逻辑 - 辅助技术（如屏幕阅读器）依赖单轨道语义，双轨并发反而破坏可访问性
正确做法：合并进一个 WebVTT 文件，用 class 区分内容层
把翻译和拼音写在同一段 cue 里，用 <v xml:lang="zh"></v> 和 <v xml:lang="zh-Latn"></v> 或自定义 class 标记，再通过 CSS 的 ::cue(.translation) 和 ::cue(.pinyin) 分别控制位置与样式。
- VTT 文件内必须用
WEBVTT开头，空一行后写 cue，例如：
WEBVTT 1 00:00:01.000 --> 00:00:04.000 <v class="translation">你好，欢迎观看本视频。</v> <v class="pinyin">nǐ hǎo, huān yíng guān kàn běn shì pín。</v>
- HTML 中只需声明一个
track：<track kind="subtitles" srclang="zh" label="中文+拼音" src="dual.vtt" default></track> - CSS 控制双行布局（注意：必须加
!important覆盖浏览器默认样式）：
video::cue(.translation) {
display: block;
}
video::cue(.pinyin) {
display: block;
font-size: 75%;
line-height: 1;
}
常见失败点：路径、编码、结构三处静默报错
哪怕 VTT 内容写对了，以下任一条件不满足，字幕就彻底消失，且控制台无提示：
立即学习“前端免费学习笔记（深入）”；
-
track没紧贴在所有<source></source>之后、之前 → 浏览器直接跳过解析 - VTT 文件带 UTF-8 BOM（Windows 记事本常偷偷加）→ Firefox 显示空白，Chrome 可能乱码
- 服务器返回
Content-Type不是text/vtt→ Chrome/Safari 拒绝加载（本地开发用file://协议必现） -
src是 Blob URL（如URL.createObjectURL()生成）→ 所有浏览器静默忽略，不报错
流媒体场景下完全不可用
如果你用的是 HLS（.m3u8）或 DASH（.mpd），原生 track 标签对协议内字幕无效。hls.js 或 dash.js 加载的字幕必须由 JS 解析后调用 video.addTextTrack() 注入，并手动对齐时间轴——此时双语逻辑得在 JS 层合成，不能靠 VTT 文件内 <v></v> 标签。
真正难的不是写两行字幕，而是让浏览器相信这“是一条轨道里的两层信息”，而不是“两条互斥轨道”。漏掉 ::cue CSS、VTT 缺空行、track 放错位置，都会导致它看起来像“没生效”，其实根本没进渲染流水线。
