track元素设kind="metadata"才被识别为元数据轨道;src需为合法WebVTT(首行WEBVTT、窄时间窗、UTF-8无BOM、text/vtt MIME);JS须设mode="hidden"、监听oncuechange、用activeCues和getCueAsHTML()读取,且不支持default属性和右键启用。

track 元素定义 metadata 轨道必须设 kind="metadata"
只有 kind="metadata" 才被浏览器识别为元数据轨道;其他值如 "meta"、"data" 或留空都会导致轨道不加载,video.textTracks 中完全不可见。该轨道不会在播放器 UI 中显示菜单项,也不会渲染任何文本,纯粹供脚本读取。
metadata 轨道的 src 文件必须是合法 WebVTT 且含有效时间戳
src 指向的 .vtt 文件仍需满足 WebVTT 基础规范:首行必须是 WEBVTT,每段需有严格格式的时间轴(如 00:00:01.000 --> 00:00:03.500)和内容块。但内容部分可为空,或写 JSON 片段、自定义标记,例如:
WEBVTT
1
00:00:02.000 --> 00:00:02.001
{"scene":"intro","speaker":"narrator"}
2
00:00:05.200 --> 00:00:05.201
{"scene":"product-demo","step":1}
注意:时间窗口必须极窄(如 1ms),否则可能触发多次重复解析;文件必须 UTF-8 无 BOM,且服务端返回 text/vtt MIME 类型。
JS 读取 metadata 轨道内容要用 textTracks[i].oncuechange + getCueAsHTML()
metadata 轨道不会自动激活,必须手动设置 track.mode = 'hidden'(不能用 'showing',那会报错或静默忽略);监听 cue 变化靠 track.oncuechange,不是 video.ontimeupdate:
立即学习“前端免费学习笔记(深入)”;
-
track.readyState === 2(loaded)后才能安全监听 - 每个触发的
track.activeCues是TextTrackCueList,遍历用for (const cue of track.activeCues) -
cue.text返回原始字符串,若含 HTML 需自行解析;cue.getCueAsHTML()可转为 DOM 片段(但仅 Chrome/Edge 支持,Firefox 返回空 DocumentFragment) - 不要依赖
track.cues——它只包含已解析的 cue,且在动态加载场景下可能为空
metadata 轨道跨域、路径、位置错误会导致静默失败
和 subtitles/captions 一样,<track></track> 必须是 <video></video> 的直接子元素,且位于所有 <source></source> 之后;src 若跨域,服务端必须返回 Access-Control-Allow-Origin: *,否则 Firefox/Edge 不发起请求,控制台也无报错;用 file:// 协议打开页面时,所有 src 加载均失败——必须走 HTTP(S) 服务。
最容易被忽略的是:metadata 轨道无法通过右键菜单启用,也不能设 default 属性(规范禁止),它的存在与否完全取决于 JS 是否监听了 oncuechange 并正确处理了 activeCues。



















