HTML5 标签本身不计算对齐，真正实现时间轴精准对齐依赖浏览器原生WebVTT解析器、严格合规的VTT文件、正确DOM结构及服务端text/vtt响应。
HTML5 的 标签本身不负责“计算”对齐，它只是声明轨道；真正实现时间轴精准对齐，靠的是浏览器原生的 WebVTT 解析器 + 严格合规的 VTT 文件 + 正确的加载时机与 DOM 结构。稍有偏差，字幕就可能首帧丢失、延迟半秒、或根本不出现在菜单里。
WebVTT 文件必须零误差
浏览器对 .vtt 文件极其苛刻，一个字符错就静默丢弃整条轨道：
- 首行必须是顶格、全大写、无空格、无缩进、无 BOM 的 WEBVTT（写成
webvtt、WebVTT或前面有空格/换行都会失败） - 时间戳格式强制为
00:00:01.234 --> 00:00:04.567：小时不能省略（即使为 0），毫秒必须三位，箭头前后各一个空格 - 编码必须是 UTF-8 无 BOM —— Windows 记事本默认带 BOM，务必用 VS Code、Sublime 或 Notepad++ 保存为 “UTF-8”（不是“UTF-8 with BOM”）
- 中文、日文等非 ASCII 字符需直接写入，确保编辑器和服务器都按 UTF-8 解析，否则显示为方块或问号
track 标签位置与属性一个都不能少
不是装饰性标签，它是浏览器识别字幕轨道的唯一入口：
- 必须作为
的**直接子元素**，且必须放在所有之前 - 四个属性缺一不可：
kind="subtitles"（不能拼错或加空格）、src（路径可访问，跨域需 CORS）、srclang="zh"（标准 BCP 47 码，如zh-Hans）、label="中文(简体)"（用户看到的名称） - 若希望默认启用，必须显式加
default属性 —— iPad Safari 尤其依赖这个，否则字幕加载但不渲染
浏览器同步机制有隐性限制
原生 时间对齐是“粗粒度”的，不是帧级精确：
- 浏览器每约 200ms 检查一次
video.currentTime，匹配最近的 cue，无法应对丢帧、变速播放或网络抖动导致的累积误差 - 不响应手动偏移校正（如用户按 ←/→ 微调）、播放速率突变等动态变化
- DOM 渲染本身会引入延迟，高频更新（如弹幕式字幕）不适合直接走原生 track 渲染
- 若需更高精度，必须用 JavaScript 监听
textTrack.oncuechange，检查activeCues[0].startTime是否与当前时间匹配，再做微调
服务端与 MIME 类型要配对
就算 HTML 和 VTT 都写对了，服务器返回错误类型也会让字幕失效：
- .vtt 文件必须由服务器返回
Content-Type: text/vtt - 常见错误：Nginx/Apache 未配置 .vtt 后缀映射，或 CDN 缓存了旧响应头，导致返回
text/plain或application/octet-stream - 可在浏览器开发者工具 Network 面板中检查响应头确认
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
