双语字幕需四个环节全到位:字幕文件合规(WEBVTT首行、正确时间格式、UTF-8无BOM)、HTML结构正确(track为video直接子元素且在source后)、属性完整(kind="subtitles"、src、srclang、label缺一不可)、服务环境达标(本地用http服务器、MIME类型为text/vtt、跨域配CORS)。

网页视频加中英双语字幕,关键不是多写一个 <track></track>,而是让两个轨道都“被浏览器真正识别并可选”。只要四个环节全到位——字幕文件合规、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
<track></track> 必须是 <video></video> 的直接子元素,且严格放在所有 <source></source> 之后、 之前:
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
- ✅ 正确位置:
<video><source> ... </source><track zh><track en></track></track></video> - ❌ 错误位置:写在
<source></source>前面、写在<video></video>外、中间夹了注释或 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 特别敏感:必须至少有一个
<track kind="subtitles" default></track>,否则控件栏根本不显示「字幕」按钮

















