标签跨域加载.vtt文件会静默失败，因其请求独立于video且不支持crossorigin属性，需服务端配置Access-Control-Allow-Origin和Content-Type:text/vtt响应头。
直接用 标签无法绕过跨域限制——它发起的请求和 fetch 一样受同源策略约束，src 指向跨域 .vtt 文件时，浏览器会静默失败，除非服务端配合。
为什么 track 的 src 跨域会静默失败
浏览器对 的请求是独立发起的，不继承 的 CORS 状态。若响应头缺失 Access-Control-Allow-Origin: *，Firefox、Edge 会拒绝加载，Chrome 控制台可能只显示 Failed to load resource: No 'Access-Control-Allow-Origin' header，而 Safari 可能连错误都不报。
-
track不支持crossorigin属性（不像<script></script>或 - 本地开发时用
file://协议打开 HTML，所有.vtt加载必败——这是协议级限制，不是配置问题 - 即使视频本身跨域且带 CORS，
track的请求也完全独立，不会“沾光”
服务端必须返回正确的 CORS 和 MIME 头
CDN 或后端需确保每次响应 .vtt 请求时都带上两个关键响应头：
-
Access-Control-Allow-Origin: *（或精确域名，如https://your-site.com） -
Content-Type: text/vtt（不能是text/plain或application/octet-stream；Nginx/Apache 需显式配置 MIME 类型）
例如 Nginx 配置片段：
location ~ \.vtt$ {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Content-Type' 'text/vtt';
expires 1h;
}
替代方案：用 JavaScript 动态注入文本轨道
当无法控制字幕服务端时，可绕过 ，改用 JS 手动创建并注入轨道——前提是能用 fetch 获取字幕内容（仍需目标服务端允许 CORS，但至少你能捕获错误并降级）：
- 先用
fetch('https://cdn.example.com/zh.vtt')获取 VTT 文本 - 调用
video.addTextTrack('subtitles', '中文(简体)', 'zh')创建空轨道 - 用
new VTTCue(...)解析时间轴和文本，逐条添加进track.cues - 最后设
track.mode = 'showing'；注意：不能直接把 fetch 到的原始字符串赋给track.src
这种方式可控性强，但需自行处理 WebVTT 语法解析（推荐用 @lyracist/vtt-parser 这类轻量库，避免手写正则）。
本地开发时最常踩的坑
90% 的“字幕不显示”问题其实发生在本地调试阶段：
- 用 VS Code Live Server 或
python3 -m http.server启服务，别双击 HTML 文件 - 确认 .vtt 文件是 UTF-8 无 BOM 编码（Windows 记事本默认带 BOM，会导致 Firefox 显示空白）
- 检查路径是否相对 HTML 文件——不是相对 JS，也不是相对当前 URL 路径
- Safari 对
srclang更敏感，必须用zh-Hans而非zh才可能自动匹配系统语言
真正难的不是加一行 ，而是让四个环节同时成立：服务端头正确、文件格式合规、HTML 结构精准、浏览器行为理解到位。漏一个，字幕就彻底消失，还不会报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
