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"，浏览器直接忽略。

• ✅
• ❌（kind="captions" 是给听障用户的，不进双语切换菜单）
• ❌（lang 是 HTML 全局属性，对 track 无意义）

双语同时显示需要JavaScript手动控制两个track的disabled状态

原生 不支持双轨并行渲染。浏览器默认只激活一个 track（mode="showing"），其余自动设为 disabled。要实现中英双语，得用 JS 同时启用两条字幕轨，并确保它们的 VTT 文件时间轴严格对齐。

关键操作是把其中一条设为 mode="hidden"（不渲染但保留在 DOM），另一条设为 mode="showing"，再通过 CSS 定位叠加——但更稳妥的做法是：禁用所有原生 track 渲染，用 JS 解析 VTT、生成两个

浮层手动控制位置和显隐。

• 直接修改 track.mode：设 track1.mode = "showing"，track2.mode = "hidden"，再用 CSS 给 track2 的 ::cue 加定位偏移（但兼容性差，Safari 对多 cue 渲染支持弱）
• 推荐方案：监听 video 的 timeupdate，用 VTTParser（或简单正则）读取两份 VTT，匹配当前时间戳，把对应中英文文本塞进两个固定定位的
  和

  VTT文件格式不规范会导致track加载失败或时间轴错乱

  哪怕只有一个空格或换行错误，Chrome 会静默丢弃整条 track（DevTools 的 Network 面板看不到请求失败，但 Elements 里 track 的 readyState 停在 0）。

  

  财经HTML高端海报生成

  复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

  下载

  必须检查：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 的提示

  双语字幕最难的不是叠加显示，而是时间轴对齐精度和移动端策略适配。很多团队卡在 iOS 上，反复检查 JS 逻辑却忘了 Safari 根本没给权限去 touch track.mode。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！