浏览器禁止track标签加载file://路径字幕，必须通过HTTP服务器（如Live Server）访问相对路径的UTF-8编码VTT文件，首行WEBVTT、时间戳格式严格，动态加载需用FileReader+addTextTrack。
track 标签不能直接读取本地 file:// 路径
浏览器出于安全限制， 的 src 属性不接受 file:/// 开头的绝对本地路径（比如 file:///D:/sub.vtt），会直接报 net::ERR_FILE_NOT_FOUND 或静默失败。它只支持相对 URL（如 ./sub.vtt）或 HTTP/HTTPS 协议地址。这意味着你必须把字幕文件放在 Web 服务器可访问的目录下，再通过服务访问。
用 Live Server 启动页面才能让 ./sub.vtt 正常加载
VS Code 的 Live Server 插件、Python 的 python -m http.server、或者 Vite/Nuxt 等开发服务器，都是必需环节。没有服务器， 就是无效的 —— 浏览器会按当前 HTML 文件所在磁盘路径去拼接，但被沙箱拦截。
- 确保
sub.vtt和 HTML 文件在同一个项目文件夹下（例如都在project/目录） - HTML 中写
（不用./也能工作，但加了更明确） - 用 Live Server 启动后，浏览器地址栏显示的是
http://127.0.0.1:5500/xxx.html这类，不是file:// - 检查开发者工具 Network 面板，确认
sub.vtt返回状态码是 200，且 MIME 类型为text/vtt
常见错误：vtt 文件乱码或解析失败
WebVTT 文件必须保存为 UTF-8 编码（无 BOM），否则中文会变成方块或时间轴错乱。用 VS Code 打开 .vtt 文件，右下角查看编码格式，点击切换并「Save with Encoding」→「UTF-8」。
- 第一行必须是
WEBVTT，后面紧跟一个空行 - 时间戳格式严格为
hh:mm:ss.mmm --> hh:mm:ss.mmm，毫秒位必须三位，不能少也不能多 - 避免使用 Word 或记事本另存为，它们容易插入不可见控制字符；推荐用 VS Code、Sublime 或专用工具（如 Aegisub）编辑
- 服务器未配置
.vtt的 MIME 类型时，某些浏览器（尤其是 Safari）会拒绝加载；本地开发用 Live Server 通常已内置支持，无需额外配置
想绕过服务器？用 FileReader + Blob URL 动态挂载 track
如果真要“纯前端选本地字幕”，就得放弃 写对就行。其他所有“绕过服务器”的做法，都会在兼容性、编码处理或 cue 渲染上埋坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
