根本原因是元素未被浏览器纳入DOM树，因其必须作为或的直接子元素且位于之后、其他内容之前；若位置错误、父元素不符或协议为file://，则虽在控制台可见却不可访问、length为0。
为什么 <track></track> 元素在控制台里显示但 length === 0
根本原因不是 JS 没读到标签，而是浏览器压根没把它纳入 DOM 树——<track></track> 必须作为 <video></video> 或 <audio></audio> 的**直接子元素**，且必须出现在媒体元素内容区的最前面（即在任何 <source></source> 之后、<img alt="网页HTML没有加载track元素怎么查？控制台问题处理" > 或文本之前）。如果位置错、父元素不对、或被包裹在 <div> 里，它就会“不可见”：Elements 面板可能还显示灰色提示（浏览器解析器识别到了这个标签），但 <code>document.querySelectorAll('track') 返回空数组，video.textTracks.length 也是 0。
-
<track></track>不是普通 HTML 元素，它不会渲染成节点，只在媒体元素上下文中激活 - 写成
<div><track kind="subtitles" src="zh.vtt"></track></div>→ 完全无效，连解析都不会进 media 的 track 列表 - 写成
<video><track><source src="a.mp4"></source></track></video>→<track></track>被忽略（<source></source>后再不能有其他子元素） - 正确顺序只能是：
<video><source><source><track><track></track></track></source></source></video>
video.textTracks 始终为空？检查加载时机和 src 是否就绪
<track></track> 是惰性加载的：即使 DOM 结构完全正确，只要 <video></video> 的 src 还没设置、或还没触发 loadstart，所有 textTrack 都处于 disabled 状态，且 video.textTracks.length 可能仍为 0。这不是 bug，是规范行为。
- 先确保
video.src已赋值且非空（哪怕只是占位符data:video/mp4,） - 不要在
DOMContentLoaded时就读video.textTracks，要等video.readyState >= 1或监听loadedmetadata事件 -
type="subtitles"的 track 必须配srclang才会被浏览器计入可用列表（Chrome/Firefox 均如此） - VTT 文件返回 404 或 MIME 类型不是
text/vtt，track 会静默失败，textTracks里依然没有它
控制台里能看到 <track></track> 但点不开？用 getKind() 和 mode 验证状态
Elements 面板中看到 <track></track> 标签，不代表它已激活。右键该标签 → “Break on” → “attribute modifications”，然后手动调用 video.textTracks[0].mode = 'showing'，看是否触发断点；或者直接在 Console 里运行：
const video = document.querySelector('video');
console.log(video.textTracks); // 查看实际长度和每个 track.mode
console.log(Array.from(video.textTracks).map(t => ({kind: t.kind, srclang: t.srclang, mode: t.mode})));
-
mode值为'disabled'表示未启用；'hidden'表示已加载但未显示；'showing'才真正在播字幕 -
kind必须是合法值：'subtitles'、'captions'、'descriptions'、'chapters'、'metadata'，拼错就进不了列表 - 多个
<track></track>的srclang不能重复，否则后一个会覆盖前一个（尤其动态插入时）
VTT 文件加载失败却不报错？手动 fetch 验证网络和响应头
浏览器对 <track src="xxx.vtt"></track> 加载失败是静默的——控制台不报 404，Network 面板里甚至可能不显示请求。这是因为它走的是内部 track loader，不走常规 fetch 流程。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 打开 Network 面板，过滤
vtt，刷新页面，确认是否有该请求及状态码 - 若无请求，说明
<track></track>根本没被识别（结构/位置问题）；若有但 404，检查路径大小写、服务器是否配置了text/vttMIME 类型 - 临时用
fetch('xxx.vtt').then(r => r.text()).then(console.log)手动验证：能取到内容，证明路径和权限 OK；取不到，说明问题出在网络或服务端 - 本地双击打开（
file://协议）时，VTT 加载必然失败（跨源限制），必须走 HTTP 服务（如http://localhost:8080）
真正卡住人的往往不是语法错误，而是 <track></track> 在 DOM 中“存在但不可达”——它既不在 querySelectorAll 结果里，也不进 textTracks 列表，更不触发任何报错。每一步都要验证：位置对不对、父元素对不对、src 设没设、VTT 能不能直连访问、协议是不是 file://。漏掉其中任一环，它就彻底隐身。
