track元素必须作为video/audio的直接子元素、紧贴source之后且自闭合,同时满足kind/srclang/src属性齐全、WebVTT文件首行为WEBVTT且服务端返回text/vtt MIME类型,缺一即静默失效。

track 元素必须作为 video 或 audio 的子元素出现,且不能闭合自身(即必须写成自闭合形式),否则浏览器不会加载字幕或描述文本。
track 元素必须放在 media 元素内部,且位置有要求
浏览器只解析紧邻在 source 元素之后、media 结束标签之前的 track。如果写在 source 之前,或包裹在 div 里,或放在 video 外部,都会被忽略。
-
track应该放在所有source之后、video或audio结束标签之前 - 多个
track可并列,但只有kind="subtitles"且srclang匹配用户系统语言、且default属性存在的那条才可能自动启用 - 不支持嵌套内容,不能写
,必须是或(后者等价于自闭合)
必需属性与常见取值组合
kind、src、srclang 是语义协同的关键:缺一不可(除非 kind="metadata",此时 srclang 可省略)。浏览器根据这三者判断是否加载及如何呈现。
实现 Markdown↔ HTML 互转,支持导出 PDF,用于用户请求的文档格式转换。
-
kind="subtitles":需配srclang="zh"和有效src指向 WebVTT 文件 -
kind="captions":面向听障用户,含声音描述,同样需srclang和src -
kind="descriptions":供屏幕阅读器使用,srclang推荐填写 -
kind="chapters":用于章节导航,src必须指向含CHAPTERS块的 WebVTT -
kind="metadata":不显示,仅供 JS 读取,此时src可为 JSON 或自定义格式,但需服务端返回Content-Type: text/plain或兼容 MIME 类型
src 指向的 WebVTT 文件必须符合格式规范
哪怕 HTML 中 track 写得完全正确,只要 src 指向的 .vtt 文件第一行不是 WEBVTT(大小写敏感,后可跟空格或换行),浏览器就会静默失败——控制台通常不报错,只是字幕不出现。
- 文件首行必须严格为
WEBVTT,不能有 BOM、不能是webvtt或WEBVTT FILE - 时间戳格式必须是
HH:MM:SS.mmm --> HH:MM:SS.mmm,毫秒位必须为三位 - 每段字幕之间需有空行,否则后续段落可能被跳过
- 服务器需返回
Content-Type: text/vtt;若用 Nginx,需在配置中添加types { text/vtt vtt; }
最容易被忽略的是 WebVTT 文件的编码和 MIME 类型——UTF-8 无 BOM 是底线,而服务器配置缺失会导致 Chrome 等浏览器直接拒绝解析,连 Network 面板都看不到请求完成状态。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










