必须使用标签实现字幕，因其原生支持可访问性、键盘控制和系统菜单，而手动实现会违反WCAG 1.2.2；.vtt文件需满足WEBVTT开头、英文句点分隔时间戳、UTF-8无BOM；必填kind、srclang、label属性；跨域需返回Content-Type: text/vtt。
<track></track> 是唯一标准方式，不是“可选方案”，而是浏览器原生字幕支持的强制路径。其他如 JS 手动解析、Canvas 渲染或 div 叠加都绕过可访问性、键盘控制和系统级字幕菜单，不推荐用于生产环境。
为什么必须用 <track></track> 而不是自己写 div + 定时显示
手动实现字幕会丢失三项关键能力：屏幕阅读器无法识别字幕内容、键盘用户无法用 Tab 切换字幕开关、浏览器右键菜单里没有「字幕」选项——这意味着 WCAG 1.2.2（字幕-预录）合规失败。而 <track></track> 由浏览器内核直接接管，自动绑定到 video.textTracks API，且触发 cuechange 事件，所有现代浏览器（Chrome 23+、Firefox 31+、Safari 6.1+、Edge 12+）都完整支持。
.vtt 文件必须满足的三个硬性条件
WebVTT 不是“随便存个文本就行”。常见失败几乎全因以下三点之一：
- 文件开头不是严格
WEBVTT（全大写、无空格、无 BOM、后跟一个空行） - 时间戳格式错误，例如用了
00:01:02,345（逗号）而非00:01:02.345（英文句点） - 中文/日文等 UTF-8 文件含 BOM —— 浏览器（尤其是 Safari 和旧版 Edge）会静默拒绝加载，控制台只报
Failed to load resource，不提示编码问题
验证方法：用 VS Code 打开 .vtt 文件 → 右下角查看编码标识 → 点击切换为 UTF-8 without BOM → 保存。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<track></track> 标签里最容易漏掉的属性
只写 <track src="zh.vtt"></track> 肯定不工作。必须显式声明：
-
kind="subtitles"：不能省略，也不能写成"caption"或"subtitles "（尾部空格）；captions类型默认包含音效描述，行为与subtitles不同 -
srclang="zh"：ISO 639-1 小写两字母码，zh-CN或zh-Hans不被浏览器识别为语言匹配依据 -
label="中文"：这是用户在播放器字幕菜单里看到的名字，为空或重复会导致菜单项不可点
如果想默认开启，仅加 default 即可，但注意：同一 <video></video> 下只能有一个 default，多个会导致全部失效。
高清字幕 ≠ 高分辨率视频，而是指 WebVTT 的样式与同步精度
所谓“高清字幕”，实际是三件事：
- 时间轴误差 ≤ 50ms：用专业工具（如 Aegisub 或 Premiere Pro 导出）校准，别靠肉眼拖动
- 支持 CSS 定制：用
::cue伪元素控制字体、阴影、背景，例如video::cue { font-size: 1.2rem; text-shadow: 0 0 8px #000; } - 多语言轨道共存：每个
<track></track>对应独立 .vtt 文件，浏览器根据srclang自动匹配系统语言，无需 JS 干预
真正容易被忽略的是：跨域加载 .vtt 文件时，服务器必须返回 Content-Type: text/vtt，否则 Chrome 和 Firefox 会拒绝解析，即使文件内容完全正确。本地开发用 file:// 协议也会触发 CORS，务必起一个本地服务（如 npx serve）测试。
