HTML多媒体元素的字幕与文本替代工程SEO优化

先说说几个容易踩的坑：video 标签里的 必须紧跟在 后面，并且老老实实待在 里面；WebVTT 文件必须满足首行 WEBVTT、UTF-8 无 BOM、标准时间戳格式以及 text/vtt MIME 类型；用 JavaScript 控制字幕时，需要等 track.readyState 变成 2 才能动手；移动端最好自己写 UI 并准备一个 fallback 模拟字幕层。下面展开细说。

video 标签里 放错位置就失效

浏览器只认 开始标签之后、 之前，并且必须紧接在所有 之后的 。常见错误有哪些？

• 把 写在 前面
• 把它丢到 外面，哪怕只多一个换行
• 包在
  或注释里
• 多个 之间夹了空标签或 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）再操作
• 动态添加 后，video.textTracks 列表会自动更新，但需等 load 事件后才可用

别依赖 video.subtitleEnabled，这个属性根本不存在。

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

iOS Safari 默认隐藏原生字幕按钮，且完全不响应 default 属性；旧版 Android WebView（尤其 7.0 以下）甚至不触发 textTracks 列表。所以：

• 别指望用户能点控制条里的字幕开关
• 推荐自己做 UI 开关，用 JS 控制 track.mode
• 检测 video.textTracks.length === 0 后，fallback 用
  或 模拟字幕层

  移动端兼容性是真实存在的断层，不是配置问题。