本地双击打开HTML时track加载静默失败的根本原因是file://协议被浏览器全面禁止加载track.src，必须通过HTTP服务（如npx serve、Python服务器或Live Server插件）解决，同时确保track标签位置正确、属性完整、VTT文件格式规范且服务端返回正确MIME类型。
本地双击打开HTML时track加载静默失败
不是路径写错了，也不是文件丢了——是浏览器用file://协议打开时，直接禁用了所有track的src请求。控制台可能显示“404”或“Failed to load resource”，但实际是CORS拦截+协议限制双重封锁，连HTTP状态码都不存在。这种失败不报错、不提示、字幕菜单空着，最容易误判为代码问题。
- Chrome/Firefox/Safari 全面禁止
file://下的track.src加载（哪怕同目录） - VS Code Live Server、PyCharm 自带预览、
npx serve等工具之所以能用，是因为它们启了真实 HTTP 服务，绕过了协议限制 - Obsidian、Axure RP 8 等导出的 HTML 同样受此限制，双击必挂
必须用HTTP服务替代file://协议
唯一可靠解法：把当前目录变成一个本地 Web 服务器。不用配域名、不用改代码，只换访问方式。
- 有 Node.js：终端进 HTML 所在文件夹，运行
npx serve（首次会自动下载），然后访问http://localhost:5000/your-page.html - 没 Node.js：用 Python，运行
python3 -m http.server 8000，然后访问http://localhost:8000/your-page.html - VS Code 用户：装 Live Server 插件，右键 HTML 文件 → “Open with Live Server”，它等价于
npx serve - 别信 PyCharm 右上角的浏览器图标——它走的是内部代理端口（如
:63342），requests.get()或外部脚本无法访问
track标签结构与属性必须严格对齐
HTTP 服务只是前提，track 标签本身写错位置或漏属性，照样静默失效。浏览器不做容错，错一位就丢弃整条轨道。
- 位置必须是：
<video><source><track></track></source></video>，<track></track>必须紧贴在所有<source></source>之后、之前，中间不能插注释、空行、<div> <li>四个属性缺一不可：<code>kind="subtitles"（不能少 s）、srclang="zh-Hans"（BCP 47 格式，不能写chinese）、label="中文(简体)"、src="zh.vtt" -
default属性最多只能在一个<track></track>上出现；多个会导致行为未定义（通常只第一个生效） - JS 动态插入
<track></track>到已渲染的<video></video>中？无效。必须随 HTML 一起解析 - 首行必须顶格、全大写、无空格、无 BOM：
WEBVTT（写成webvtt或前面有空格就失败） - 编码必须是 UTF-8 无 BOM（Windows 记事本默认带 BOM，务必用 VS Code 选 “Save with Encoding” → UTF-8）
- 时间戳格式强制为
00:00:01.234 --> 00:00:04.567：毫秒三位、箭头前后各一空格、小时位不能省略 - 服务端必须返回
Content-Type: text/vtt；Nginx/Apache 需手动配置 MIME 类型，否则 Safari 可能直接忽略
VTT 文件格式和服务端响应要过四关
就算 HTML 结构全对、服务也起了，.vtt 文件本身或服务响应不对，依然白搭。Chrome 对 WebVTT 的解析近乎零容错。
立即学习“前端免费学习笔记（深入）”；
