双语字幕需四个环节全到位：字幕文件合规（WEBVTT首行、正确时间格式、UTF-8无BOM）、HTML结构正确（track为video直接子元素且在source后）、属性完整（kind="subtitles"、src、srclang、label缺一不可）、服务环境达标（本地用http服务器、MIME类型为text/vtt、跨域配CORS）。
网页视频加中英双语字幕，关键不是多写一个 ，而是让两个轨道都“被浏览器真正识别并可选”。只要四个环节全到位——字幕文件合规、HTML 结构正确、属性完整、服务环境达标——双语菜单自然出现，用户一点就能切换。
准备两个合规的 WebVTT 字幕文件
中文和英文必须各自独立成文件（如 zh.vtt 和 en.vtt），且每个都严格满足以下要求：
- 首行顶格、全大写、无空格、无 BOM：
WEBVTT（写成webvtt或带空格都会失败） - 时间格式为
00:00:01.234 --> 00:00:04.567：小时/分钟/秒两位，毫秒三位，箭头前后各两个空格 - 编码为 UTF-8 无签名（Notepad++ 选“UTF-8 无 BOM”，VS Code 保存时注意编码提示）
- 中文内容不乱码，英文不出现问号或方块；可用在线 VTT 验证器快速检查
在 video 标签里按顺序嵌入两个 track
必须是 的直接子元素，且严格放在所有 之前：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- ✅ 正确位置：
- ❌ 错误位置：写在
外、中间夹了注释或 div - 建议给中文轨道加
default，这样页面加载后默认显示中文，但用户仍可手动切英文
每个 track 都必须带齐四个核心属性
缺一不可，浏览器不会“猜”你想要什么：
-
kind="subtitles"：必须写全，不能是subtitle或captions（后者用途不同，UI 也分离） -
src：指向 .vtt 文件的相对或绝对路径（不支持 blob URL） -
srclang：用标准语言码，如zh、en（别写chinese或english） -
label：用户在播放器字幕菜单里看到的名字，比如中文(简体)、English
确保服务端和运行环境不出问题
即使代码全对，环境不对字幕照样不显示：
- 本地开发时别直接双击 HTML 打开（
file://协议下几乎所有浏览器禁用 .vtt 加载），要用本地服务，比如终端运行python3 -m http.server - 服务器需返回正确的 MIME 类型：
Content-Type: text/vtt（Nginx/Apache 要单独配置 .vtt 后缀） - 如果字幕和视频不在同一域名下，服务端必须返回
Access-Control-Allow-Origin: *（CORS 头） - Safari 特别敏感：必须至少有一个
，否则控件栏根本不显示「字幕」按钮
