Elements面板可直接验证track是否被解析为DOM节点：必须是video的直接子元素且紧接source之后，否则即使源码存在也不会显示；若未出现，则非显示问题而是根本未加载。
用 Elements 面板直接查看 track 是否被解析为 DOM 节点
浏览器只在特定位置解析 track：必须是 video 的直接子元素，且紧接在所有 source 之后、 之前。如果它没出现在 Elements 面板里（哪怕 HTML 源码写了），说明结构不合法。
常见失效位置包括：
• 写在 source 标签之前
• 套在 div 或其他容器里
• 放在 外面
• 多个 track 之间夹了 HTML 注释或空行（Safari 尤其敏感）
检查时，右键点击 video 元素 → “Reveal in Elements panel”，展开看子节点是否包含 track。没有？那就不是“字幕没显示”，而是“根本没加载”。
查 video.textTracks.length 判断轨道是否注册成功
即使 track 出现在 Elements 中，也不代表它被浏览器识别为可用轨道。打开 Console，执行：
document.querySelector('video').textTracks.length
返回 0 表示全部失败；返回 1+ 才说明至少有一个轨道被注册。但注意：
• 返回值 >0 不等于能显示——可能因 kind/srclang/label 缺失而无法出现在菜单中
• 如果你动态用 JS 插入 track（比如 video.appendChild(trackEl)），这个值永远是 0 —— 浏览器只扫描初始 HTML，不响应后续 DOM 变更
验证 track 四个必需属性是否齐全且拼写正确
kind、srclang、label、src 缺一不可，且容错率为零：
-
kind="subtitles"必须全小写、无空格；kind="caption"或kind="subtitles "（末尾空格）都会静默失效 -
srclang必须是合法 BCP 47 码，如zh、zh-Hans、en-US；chinese、zh_CN、空值均被忽略 -
label为空时菜单显示(no label)，多语言场景下无法区分 -
src路径必须可访问：本地双击打开 HTML 时，file://协议会拦截所有track请求——必须起本地服务（如python3 -m http.server）
确认 WebVTT 文件格式与服务端响应是否合规
哪怕 DOM 和属性全对，只要 VTT 文件错一位，Chrome/Firefox/Safari 就静默丢弃整条轨道，控制台不报错、Network 面板看不到失败请求。
必须满足：
• 首行顶格、全大写、无空格、无 BOM：WEBVTT
• 时间戳毫秒位严格三位：00:00:01.234 --> 00:00:04.567（.23 或 .2345 都不行）
• 文件保存为 UTF-8 without BOM（Windows 记事本默认带 BOM，会导致中文变方块）
• 服务端返回 MIME 类型为 text/vtt；返回 text/plain 或 application/octet-stream 会被 Chrome 直接忽略
• 跨域时服务端需带 Access-Control-Allow-Origin: *，否则 Firefox/Edge 静默失败
最简单的验证方式：把 src 地址粘贴到浏览器地址栏，直接打开 VTT 文件——如果看到乱码、空白或下载提示，就不是合规内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
