srclang属性必须为合法BCP 47语言码（如zh、en-US）且配合kind="subtitles"，缺一则字幕不进菜单；双语显示需JS手动控制两轨mode并严格对齐VTT时间轴，iOS Safari还需用户手势触发。
track元素加srclang属性才能被浏览器识别为翻译字幕
浏览器只认 srclang 属性值为合法 BCP 47 语言标签（如 zh、en、ja）的 track，且必须带 kind="subtitles"。漏掉任意一项，字幕菜单里就不会出现该条目。
常见错误：写成 lang="zh" 或 language="zh" —— 这些属性完全无效；或者 srclang="Chinese"，浏览器直接忽略。
-
<track kind="subtitles" srclang="zh" label="中文" src="zh.vtt"></track>✅ -
<track kind="captions" srclang="zh" src="zh.vtt"></track>❌（kind="captions"是给听障用户的，不进双语切换菜单） -
<track kind="subtitles" lang="zh" src="zh.vtt"></track>❌（lang是 HTML 全局属性，对 track 无意义）
双语同时显示需要JavaScript手动控制两个track的disabled状态
原生 <video></video> 不支持双轨并行渲染。浏览器默认只激活一个 track（mode="showing"），其余自动设为 disabled。要实现中英双语，得用 JS 同时启用两条字幕轨，并确保它们的 VTT 文件时间轴严格对齐。
关键操作是把其中一条设为 mode="hidden"（不渲染但保留在 DOM），另一条设为 mode="showing"，再通过 CSS 定位叠加——但更稳妥的做法是：禁用所有原生 track 渲染，用 JS 解析 VTT、生成两个 <div> 浮层手动控制位置和显隐。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>直接修改 <code>track.mode：设 track1.mode = "showing"，track2.mode = "hidden"，再用 CSS 给 track2 的 ::cue 加定位偏移（但兼容性差，Safari 对多 cue 渲染支持弱）
video 的 timeupdate，用 VTTParser（或简单正则）读取两份 VTT，匹配当前时间戳，把对应中英文文本塞进两个固定定位的 <div class="subtitle-zh"> 和 <code><div class="subtitle-en">
<h3>VTT文件格式不规范会导致track加载失败或时间轴错乱</h3>
<p>哪怕只有一个空格或换行错误，Chrome 会静默丢弃整条 <code>track（DevTools 的 Network 面板看不到请求失败，但 Elements 里 track 的 readyState 停在 0）。
必须检查：WEBVTT 开头独占一行；每个字幕块之间**空两行**；时间戳格式为 HH:MM:SS.mmm --> HH:MM:SS.mmm（毫秒必须三位）；禁止 UTF-8 BOM；中文内容需确保是 UTF-8 无 BOM 编码。
- 错误示例：
00:01:02.5 --> 00:01:04.5（毫秒少一位）→ Chrome 拒绝加载 - 错误示例：
WEBVTT（末尾有不可见 BOM）→ Firefox 显示空白字幕 - 验证工具：用浏览器打开 .vtt 文件，看是否能正常解析出字幕；或用
file -i zh.vtt确认编码
移动端iOS Safari对track动态启用支持极差
iOS 16.4 之前，track.mode = "showing" 在用户未手动点过视频控件前完全不生效（连 play() 调用后也不行），这是 Safari 的 autoplay 策略延伸限制。iOS 16.4+ 放宽了部分限制，但仍要求 video 必须有 muted 或用户手势触发后才能激活字幕轨。
- 绕过方法：首次播放前先调用
video.play().catch(e => console.log("muted required"))，若失败则提示用户点击屏幕再启用字幕 - 不要依赖
loadeddata事件去 enable track —— iOS 下该事件可能早于 track 加载完成，track.readyState还是0 - 真机调试必备：用 macOS 的 Console.app 连接 iPhone，过滤
WebCore日志，能看到类似[Log] Track not enabled due to missing user gesture的提示
track.mode。
