必须是的直接子元素且严格位于所有之后、之前；缺一不可的属性为kind、srclang、label；WebVTT文件需首行WEBVTT、UTF-8无BOM、服务端返回text/vtt MIME类型。

track 必须是 video 的直接子元素，且位置严格限定在所有 source 之后

浏览器只在 <video></video> 开始标签之后、所有 <source></source> 元素闭合之后、 之前这个狭窄区间内解析 <track></track>。放错位置等于没写——不会报错，也不会发起请求，video.textTracks.length 恒为 0。

常见错误现象包括：

• <track></track> 写在 <source></source> 前面 → 被静默忽略
• <track></track> 套在 <div> 或其他容器里 → 不触发加载 <li> <code><track></track> 放在 外面 → 完全不被识别
• <track></track> 夹在两个 <source></source> 中间 → 只有第一个 <source></source> 后的轨道可能生效（行为不可靠）

多个 track 并列时顺序不影响功能，但影响 default 逻辑

多个 <track></track> 可以并排写，浏览器会全部加载并注册进 video.textTracks 列表。但「默认启用哪个」由 default 属性决定，且只认第一个带 default 的元素。

使用场景和注意事项：

立即学习“前端免费学习笔记（深入）”；

• 如果没加 default，所有轨道初始状态都是 disabled，用户需手动打开字幕菜单选择
• 写了多个 default，只有第一个生效，后续的会被忽略
• 顺序本身不影响语言切换或 JS 控制能力，但会影响 DOM 遍历时的索引顺序（如 video.textTracks[0] 指向谁）
• 不要用 JS 动态插入 <track></track> 到已渲染的 <video></video> 内部——必须随 HTML 一起加载，否则无效

track 不能嵌套、不能包裹内容、不能省略必需属性

<track></track> 是自闭合标签，没有结束标签，也不允许包含子节点。它只靠属性声明行为，漏掉关键属性就静默失效。


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载

必需属性组合（缺一不可）：

• kind="subtitles"（或其他合法值：captions / chapters / descriptions / metadata）
• src 指向有效的 WebVTT 文件 URL（注意跨域限制）
• srclang —— 当 kind="subtitles" 时强制要求，必须是标准 BCP 47 语言标签（如 zh、en-US、zh-Latn），不能写 pinyin 或 zh-py
• label —— 用户在字幕菜单中看到的名称，建议含括号说明变体（如 中文(简体)）

错误示例：<track kind="subtitles" src="zh.vtt"></track>（缺 srclang 和 label）→ 浏览器不加载，控制台无提示。

WebVTT 文件本身也得过三关：编码、格式、响应头

<track></track> 标签只是入口，真正让字幕显示出来，还得靠后端和文件本身配合。三者任一失败，都表现为「字幕菜单里看不到该语言」或「点了没反应」。

必须检查：

• VTT 文件首行必须是纯文本 WEBVTT（不区分大小写，前后无空格，无 BOM）
• 文件保存为 UTF-8 无 BOM 编码；含中文/日文等字符时，BOM 会导致解析失败
• 服务端返回的 MIME 类型必须是 text/vtt（不是 text/plain 或 application/octet-stream）
• 若 src 是跨域地址，服务端必须返回 Access-Control-Allow-Origin 头，否则 JS 无法读取内容，部分浏览器连字幕菜单都不显示该轨道

最容易被忽略的是服务端响应头和 BOM —— 这两者不出错不报警，但字幕就是不出现。