标签是HTML5原生声明WebVTT字幕的唯一免JS方式，需确保src路径有效、.vtt文件UTF-8无BOM且首行为纯WEBVTT、kind="subtitles"与srclang="zh"等属性准确填写，否则字幕静默失效。

用 标签导入 WebVTT 字幕最直接

不用 JS、不拼接字符串、不 fetch，原生 就是 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 搭配决定字幕是否可选、是否被系统语言自动启用

这两个属性不是可有可无的装饰：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• kind="subtitles"：用户能在播放器菜单里看到并手动开关；kind="captions" 会强制显示（如静音时），但多数场景用 subtitles 更稳妥
• srclang="zh" 必须是 ISO 639-1 码（zh, en, ja），不是 zh-CN 或 Chinese；否则浏览器无法匹配系统语言自动启用
• 多个 共存时，只给一个加 default；加多了或漏了，都可能导致首次加载无字幕

样式控制靠 CSS，但 本身不支持内联 style

WebVTT 字幕默认位置在视频底部居中，想调高、加阴影、改字体？不能写 style="..." 在 上，得用 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 属性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！