html5视频字幕需通过track标签声明外部webvtt轨道，依赖文件格式、html结构、属性配置、服务端响应四环节严格协同：首行必须为顶格全大写webvtt，时间戳毫秒三位且箭头前后各一空格，utf-8无bom编码，track须紧贴source后作为video直接子元素，kind/srclang/label缺一不可，服务器须返回text/vtt mime类型。
HTML5 视频字幕不是靠“加一段文字”实现的，而是通过 track 标签声明外部轨道、配合严格合规的 WebVTT 文件，再由浏览器原生解析与渲染——四个环节缺一不可：文件格式正确、HTML结构精准、属性配置完整、服务端响应达标。
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 标签的位置与结构不能偏差
- ✅ 正确顺序：
<video><source src="a.mp4"><track kind="subtitles" src="zh.vtt" ...></track></source></video> - ❌ 错误示例：放在
前、包在 div 里、中间插入注释或空行、写在 外面 - 多个
必需属性一个都不能少且值要合法
kind、srclang、label 这三个属性不是“建议填写”，而是浏览器注册轨道的硬门槛：
- kind="subtitles"：必须写全，不能是 "subtitle"、"captions"（后者语义不同，用于听障场景）、也不能留空
- srclang="zh"：必须使用标准 BCP 47 语言码，如 zh-Hans、en-US、ja；"ch"、"cn"、"chinese" 均无效
- label="中文(简体)"：用户在播放控件中看到的名称，为空时可能显示 "(no label)"，多语种下无法区分
- default 属性最多只能在一个
服务端与运行环境常被忽略的关键点
本地双击 HTML 打开（file:// 协议）必然失败，Chrome 和 Firefox 明确禁用此场景下的
- 必须启用本地 HTTP 服务，例如：
python3 -m http.server或 Live Server 插件 - 服务器需返回正确的 MIME 类型：Content-Type: text/vtt；Nginx 需配置
types { text/vtt vtt; }，Apache 可在 .htaccess 中加ForceType text/vtt - src 路径必须同源（协议、域名、端口一致），跨域需服务端设置
Access-Control-Allow-Origin: *，否则 Network 面板显示 net::ERR_BLOCKED_BY_RESPONSE - 路径区分大小写：zh.vtt ≠ ZH.VTT（尤其部署在 Linux 服务器时）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
