浏览器原生不支持两个track同时显示翻译和拼音，因textTracks中任意时刻最多一个轨道处于mode="showing"状态；必须将翻译与拼音合并至单个VTT文件，用标签分组并配合CSS控制换行，且srclang需设为"zh"和"zh-Latn"。
为什么两个 track 不能同时显示翻译和拼音
浏览器原生不支持多个 track 同时激活渲染——textTracks 中任意时刻最多一个轨道处于 mode = "showing" 状态。即使你写了两个 <track kind="subtitles"></track>，也只会显示其中一个。所谓“双语字幕”，必须靠单个 VTT 文件内嵌多行文本实现，而不是靠多个 track 并行加载。
怎么在单个 VTT 里写翻译 + 拼音两行
关键不是加两个 track，而是把翻译和拼音合并进同一个 .vtt 文件，并用 <v></v> 标签分组+CSS控制换行：
WEBVTT 00:00:01.000 --> 00:00:04.000 <v class="translation">你好，很高兴见到你。</v><v class="pinyin">nǐ hǎo, hěn gāo xìng jiàn dào nǐ.</v>
然后配 CSS 让两行上下排列：
::cue(.translation) { display: block; }::cue(.pinyin) { display: block; margin-top: 0.2em; }
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
注意：srclang 要按语义设对——翻译用 srclang="zh"，拼音用 srclang="zh-Latn"（不是 "pinyin" 或 "zh-py"），否则辅助技术无法识别。
立即学习“前端免费学习笔记（深入）”；
常见失败点：VTT 文件格式一错全错
VTT 解析器极其严格，以下任一错误都会导致整条 cue 被跳过，且控制台无报错：
-
WEBVTT必须顶格、全大写、无空格、无 BOM； - 时间戳必须是
00:00:01.234 --> 00:00:04.567格式：小时/分/秒两位、毫秒三位、箭头前后各两个空格； - 首行
WEBVTT后必须空一行，再写 cue； - 文件编码必须是 UTF-8 无 BOM（Windows 记事本默认带 BOM，务必用 VS Code 或 Sublime 重存）；
-
src路径不能是Blob URL，必须是可访问的相对或绝对 URL；本地开发需起服务，file://协议下全部失效。
流媒体（HLS/DASH）里 track 标签完全不生效
如果你用的是 hls.js 或 dash.js，原生 <track></track> 标签只是摆设——它不会解析 m3u8 或 mpd 中的字幕轨道，也不会处理 TS 分片里的 WEBVTT 载荷。所有字幕都得由播放器 JS 解析后，手动调用 video.addTextTrack() 注入 textTracks，再精确对齐时间轴。动态添加必须等 hls 实例 ready 后执行，否则返回的 TextTrack 对象无法被识别。
