track标签必须作为video直接子元素且位于所有source之后，src指向独立.vtt文件并单独发起HTTP请求；kind、srclang、label属性缺一不可，需严格符合规范，且服务器须返回text/vtt MIME类型及UTF-8无BOM编码。

track 标签不“绑定”视频源，它只属于 video 元素本身——只要位置和属性对，浏览器就自动关联，无需手动配对。

track 必须是 video 的直接子元素，且在所有 source 之后

浏览器只认这个固定结构：video → source（可多个）→ track → 。写错顺序等于没写：

• 写在 source 前面：被忽略，控制台无报错
• 写在 video 外面：完全无效，连请求都不会发
• 中间插了注释、div 或空行：部分浏览器（如 Safari）会中断解析，后续 track 全部失效

src 属性指向的不是“视频源”，而是独立的 .vtt 文件路径

track 的 src 是单独发起的一次 HTTP 请求，和 source 的视频地址无关。常见误区：

DeepBI DHTML 页面生成器

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

下载

• 误以为 src="sub.vtt" 会自动找同目录下 video.mp4 对应的字幕——不会，它只管自己加载成功与否
• 视频和字幕跨域时，video 能播 ≠ track 能加载：必须服务端返回 Access-Control-Allow-Origin: *
• 本地用 file:// 直接打开 HTML：所有 track src 都失败，必须起本地服务（如 python3 -m http.server）

kind、srclang、label 缺一不可，否则轨道不进菜单

浏览器 UI 不会“推测”你想要什么，四个属性必须显式写出：

• kind="subtitles"：不能拼错（subtitle 少 s 或 captions 都不行），也不能留空
• srclang="zh"：必须是 BCP 47 标准码（zh-Hans、en-US 可以，chinese 不行）
• label="中文(简体)"：为空时菜单显示 (no label)，用户根本不知道这是哪条轨道
• src="zh.vtt"：路径区分大小写，ZH.VTT 在 Linux 服务器上就是 404

真正容易被忽略的点：MIME 类型和编码

就算 HTML 结构、属性、路径全对，track 仍可能静默失败：

• 服务器没配 .vtt 的 MIME 类型？Nginx/Apache 必须返回 Content-Type: text/vtt，Safari 尤其敏感
• VTT 文件带 BOM？Windows 记事本默认保存带 BOM，必须用 VS Code 选 “UTF-8 无签名” 重存
• 首行不是顶格大写 WEBVTT？写成 webvtt、WebVTT、前面有空格或空行，全部解析失败

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！