HTML多媒体元素之字幕与文本替代工程

video标签中track元素必须紧接在source之后且位于video标签内，WebVTT文件需满足首行WEBVTT、UTF-8无BOM、标准时间戳格式及text/vtt MIME类型，JS控制字幕须等待track.readyState为2，移动端需自定义UI并fallback模拟字幕。

video 标签里 放错位置就失效

浏览器只认 <video> 开始标签之后、</video> 之前，且必须紧接在所有 <source> 之后的 <track>。常见错误包括：
• 把 <track> 写在 <source> 前面
• 把它丢到 </video> 外面，哪怕只多一个换行
• 包在 <div> 或注释里
• 多个 <track> 之间夹了空标签或 HTML 注释
这些都会导致浏览器直接忽略，不报错、不加载、字幕空白。

WebVTT 文件必须满足四个硬性条件

不是改个 .srt 后缀就能用。.vtt 文件必须：
• 首行严格为 WEBVTT（全大写，无空格，无 BOM）
• 编码为 UTF-8 无 BOM（VS Code 右下角选“Save with Encoding” → UTF-8）
• 时间戳格式为 00:00:01.234 --> 00:00:04.567，不能有 SRT 的序号行或空行分隔
• 服务器返回 Content-Type: text/vtt（Nginx/Apache 需手动配置 MIME 类型）
漏掉任意一条，Chrome/Firefox 都静默失败。

JS 控制字幕前必须等 track.readyState === 2

直接设 track.mode = "showing" 很可能无效——因为字幕文件还没加载完。浏览器不会等你。
正确做法：
• 监听 track.onload 事件
• 或检查 track.readyState === TextTrack.LOADED（即值为 2）再操作
• 动态添加 <track> 后，video.textTracks 列表会自动更新，但需等 load 事件后才可用
别依赖 video.subtitleEnabled，这个属性根本不存在。

移动端字幕控件基本不可靠

iOS Safari 默认隐藏原生字幕按钮，且完全不响应 default 属性；旧版 Android WebView（尤其 7.0 以下）甚至不触发 textTracks 列表。
所以：
• 别指望用户能点控制条里的字幕开关
• 推荐自己做 UI 开关，用 JS 控制 track.mode
• 检测 video.textTracks.length === 0 后，fallback 用 <div> 或 <canvas> 模拟字幕层
移动端兼容性是真实存在的断层，不是配置问题。

立即学习“前端免费学习笔记（深入）”；