WebVTT字幕不显示的主因是src文件编码非UTF-8无BOM、srclang未用ISO 639-1小写两字母码（如zh/en）、kind误配为captions而非subtitles；三者任一出错均导致浏览器静默失败。
track 元素在 Chrome、Firefox、Edge、Safari 中行为基本一致，但实际落地时出问题的从来不是“能不能用”，而是 src 文件编码、srclang 值格式、kind 类型误配这三处——90% 的“字幕不显示”都卡在这儿。
WebVTT 文件必须是 UTF-8 without BOM
哪怕只多一个不可见的 BOM 字节，Chrome 和 Safari 就会静默失败（控制台无报错），Firefox 可能显示乱码，Edge 直接跳过该 track。这不是 bug，是规范强制要求：首行必须严格为 WEBVTT，前后不能有任何字符。
- VS Code 右下角确认编码是「UTF-8 without BOM」，不是「UTF-8」
- 用命令行检查：
file -i zh.vtt应输出charset=utf-8；若含bom，用iconv -f utf-8 -t utf-8 -o zh_fixed.vtt zh.vtt清除 - 别用 Windows 记事本保存 .vtt 文件——它默认加 BOM
srclang 必须用 ISO 639-1 小写两字母码
浏览器靠 srclang 匹配系统语言并自动启用对应轨道。srclang="zh-CN" 或 srclang="Chinese" 在所有浏览器中均无效；只有 srclang="zh"、srclang="en"、srclang="ja" 这类才被识别。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- Safari 14+ 开始支持
srclang="zh-Hans"等子标签，但 Chrome/Firefox 仍只认主语言码 - 多语言共存时，避免两个
track写相同srclang（如都写zh），否则浏览器可能随机选一个 - 若需区分简繁，用
label体现：例如label="中文（简体）"和label="中文（繁體）"
kind="subtitles" 不能写成 kind="captions"
kind="captions" 是为听障用户设计的，会强制显示时间轴外的音效描述（如 [音乐起]、[电话铃声]），且部分浏览器（如旧版 Safari）不将其列入用户可切换的字幕菜单；而 kind="subtitles" 才是标准多语言字幕轨道，支持 srclang 匹配和手动开启。
- 即使内容含音效描述，也应统一用
kind="subtitles"，这是跨浏览器唯一稳定选项 -
default属性只影响首次加载，用户手动切换后即以选择为准；不要指望刷新页面重置为 default - JavaScript 动态控制需注意：若
src跨域，textTracks列表可能为空，必须服务端配 CORS 头
真正容易被忽略的是：字幕文件路径必须同源或显式允许跨域——哪怕只是本地双击打开 HTML 文件（file:// 协议），track 的 src 也会因 CORS 被静默拦截，此时连 Network 面板都看不到请求。开发阶段务必起一个本地服务（如 npx serve）再测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
