HTML中track元素怎么定义元数据轨道-html教程-PHP中文网

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

html中track元素怎么定义元数据轨道

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：

HTML Text Extract

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

下载

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 一样，必须是的直接子元素，且位于所有之后；src 若跨域，服务端必须返回 Access-Control-Allow-Origin: *，否则 Firefox/Edge 不发起请求，控制台也无报错；用 file:// 协议打开页面时，所有 src 加载均失败——必须走 HTTP(S) 服务。

最容易被忽略的是：metadata 轨道无法通过右键菜单启用，也不能设 default 属性（规范禁止），它的存在与否完全取决于 JS 是否监听了 oncuechange 并正确处理了 activeCues。