标签是HTML5原生声明WebVTT字幕的唯一免JS方式，需确保src路径有效、.vtt文件UTF-8无BOM且首行为纯WEBVTT、kind="subtitles"与srclang="zh"等属性准确填写，否则字幕静默失效。
用 <track></track> 标签导入 WebVTT 字幕最直接
不用 JS、不拼接字符串、不 fetch，原生 <track></track> 就是 HTML5 里唯一标准且免脚本的字幕导入方式。它不是“加载”而是“声明”——浏览器拿到 src 后自动解析、对齐时间轴、响应用户切换。关键不在怎么写 JS，而在属性填得准不准、文件放得对不对。
src 路径错、编码错、BOM 错，字幕就全白搭
三个常见“无声失败”点，浏览器不报错但字幕根本不出：
-
src指向 404 或跨域资源（未配 CORS）→ 控制台 Network 标签里看状态码和 CORS 报错 - .vtt 文件带 BOM（尤其 Windows 记事本保存时默认加）→ 用 VS Code 或 Sublime 打开，右下角确认编码是 “UTF-8”，不是 “UTF-8 with BOM”
- 首行不是纯
WEBVTT（前后有空格、换行、注释）→ 删除所有前置字符，第一行必须严格是这 7 个字母
kind 和 srclang 搭配决定字幕是否可选、是否被系统语言自动启用
这两个属性不是可有可无的装饰：
-
kind="subtitles"：用户能在播放器菜单里看到并手动开关；kind="captions"会强制显示（如静音时），但多数场景用subtitles更稳妥 -
srclang="zh"必须是 ISO 639-1 码（zh,en,ja），不是zh-CN或Chinese；否则浏览器无法匹配系统语言自动启用 - 多个
<track></track>共存时，只给一个加default；加多了或漏了，都可能导致首次加载无字幕
样式控制靠 CSS，但 <track></track> 本身不支持内联 style
WebVTT 字幕默认位置在视频底部居中，想调高、加阴影、改字体？不能写 style="..." 在 <track></track> 上，得用 CSS 伪元素：
立即学习“前端免费学习笔记（深入）”；
video::cue {
color: white;
text-shadow: 0 0 2px black;
font-size: 1.2em;
line-height: 1.4;
}
注意：video::cue 是全局生效的，如果多个视频样式不同，得用 class 区分并写成 .my-video::cue；另外 Safari 对 ::cue 支持略弱，避免用太新的 CSS 属性。
