HTML5视频中track字幕失效的主因是未满足三个硬性条件：kind必须为"subtitles"、srclang需明确指定语言如"zh"、src须同源或服务端配置CORS；同时VTT文件须以WEBVTT开头、时间戳用英文句点、块间空行≥2、无UTF-8 BOM。
HTML5 视频标签改格式后 track 标签失效的典型表现
直接换用 标签但没同步处理字幕资源，浏览器就压根不加载字幕——连“字幕”按钮都不出现。常见于把 Flash 播放器迁移到 HTML5 时，只改了 ，却漏掉 或其属性配置。
track 标签必须满足的三个硬性条件
哪怕路径、格式都对，只要缺一条件，字幕照样不显示：
-
kind="subtitles"（不能写成kind="caption"，除非你真在做无障碍字幕） -
srclang必须明确指定语言，比如srclang="zh"；空值或srclang="auto"会被忽略 -
src必须是同源 URL（协议+域名+端口一致），跨域需服务端配Access-Control-Allow-Origin，否则控制台报Failed to load resource: net::ERR_FAILED
VTT 文件本身常被忽略的格式陷阱
不是所有 .vtt 都能播。浏览器对 WebVTT 解析极严格，以下任一问题都会导致静默失败（无报错，但字幕空白）：
- 文件开头缺
WEBVTT纯文本声明（必须顶格、无 BOM、无空行） - 时间戳格式错误，比如写成
00:01:02,500 --> 00:01:05,000（逗号应为英文句点：00:01:02.500） - 字幕块之间空行不足两行（规范要求至少两个换行符分隔）
- 含 UTF-8 BOM：用 VS Code 打开 → 右下角点编码 → 选 “Save with Encoding” → “UTF-8”（非 “UTF-8 with BOM”）
调试时优先检查的三处控制台线索
打开开发者工具，切到 Console 和 Network 面板，重点盯：
立即学习“前端免费学习笔记（深入）”；
- 是否出现
Failed to load track: …或Track element has no valid source—— 直接暴露src路径或 CORS 问题 - Network 中搜
.vtt，看状态码：404 是路径错，0 是跨域拦截，200 但 size=0 是文件内容为空或 BOM 污染 - Elements 面板里点开
，确认readyState属性值：0 =NOT_LOADED，2 =LOADED；长期卡在 0 就得回头查路径和网络
字幕恢复的关键往往不在视频容器，而在那个被随手复制粘贴却没验证的 .vtt 文件头和它的 HTTP 响应头。
