webvtt字幕合法需满足四点：首行严格为顶格无bom的webvtt、时间格式为hh:mm:ss.mmm --> hh:mm:ss.mmm、utf-8无bom编码、段间用空行分隔；html中track必须作为video直接子元素置于source之后且属性kind/srclang/src/label缺一不可。
直接用 WebVTT 给视频加字幕，核心就两步：写对 .vtt 文件、再用 <track></track> 正确挂进 <video></video>。错一个细节，比如首行多空格或编码带 BOM，字幕就完全不显示。
WebVTT 文件怎么写才合法
浏览器对 WebVTT 解析极严格，不是“差不多就行”，必须逐项达标：
- 第一行必须是顶格、全大写、无空格、无 BOM 的 WEBVTT（写成 webvtt、WebVTT 或前面有空格都会失败）
- 时间格式固定为 HH:MM:SS.mmm --> HH:MM:SS.mmm，例如
00:01:23.456 --> 00:01:26.789；小时不足两位不能省略，毫秒必须三位 - 每段字幕以序号开头（可选但推荐），后跟时间轴和文本，段与段之间用空行分隔
- 文件保存为 UTF-8 编码且无 BOM（Windows 记事本默认带 BOM，务必改用 VS Code、Sublime 或 Notepad++ 选择“UTF-8 无签名”保存）
- 中文、日文等非 ASCII 字符要确保在编辑器里正常显示，避免保存后变问号或方块
HTML 中怎么正确引入多个语言字幕
<track></track> 必须作为 <video></video> 的直接子元素，放在所有 <source></source> 标签之后、 之前。每个语言一个 <track></track>，属性缺一不可：
-
kind="subtitles"：明确类型，不能写成
caption或漏掉 -
srclang：用 ISO 639-1 码，如
zh、en、ja，这是浏览器自动匹配系统语言的依据 -
label：用户在播放器菜单里看到的名字，建议带括号注明变体，如
中文(简体) -
src：指向 .vtt 文件的相对或绝对路径；若跨域，服务端需配置
Access-Control-Allow-Origin: * - default（可选）：仅设在一个轨道上，表示页面加载时默认启用；未设则默认关闭
示例结构：
常见问题排查要点
字幕不出现？别急着改代码，先检查这几点：
- 打开浏览器开发者工具 → Network 标签页，看 .vtt 文件是否 200 加载成功；若报 404 或 CORS 错误，说明路径不对或跨域没配好
- 点开 .vtt 文件响应内容，确认首行真的是纯
WEBVTT，没有隐藏字符或 BOM - 在 Elements 面板中检查
<track></track>元素是否被正确解析；若它变成灰色或不渲染，大概率是属性拼写错误或缺失 - 服务器是否配置了正确的 MIME 类型？
.vtt文件应返回text/vtt，否则部分浏览器会拒绝加载 - 右键视频 → 查看「字幕」菜单，确认语言选项是否列出；没出现说明 HTML 结构或属性有硬伤
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
