HTML中唯一标准方案是标签配合WebVTT章节文件实现章节式字幕，必须作为子元素且kind="chapters"，WebVTT需以WEBVTT开头、每段cue前加CHAPTER标识、时间格式严格为HH:MM:SS.mmm。

HTML 中 标签是唯一标准方案

浏览器原生支持的章节式字幕，只能靠 配合 WebVTT 文件实现。它不支持直接写在 HTML 里，也不能用

或 模拟——那样既没时间轴控制，也触发不了播放器的字幕菜单，更无法响应 toggle、kind="chapters" 这类语义。

关键点： 必须作为 的子元素，且 kind="chapters" 才能被识别为章节导航条（不是普通字幕）。

• kind="chapters"：告诉浏览器这是章节轨道，播放器会在进度条上方渲染章节标记（如 Safari、Edge 原生支持；Chrome 需配合 showing 状态才显示）
• srclang 和 label 是可选但推荐的，用于多语言章节或 UI 显示名
• default 属性会让该章节轨道默认启用（用户无需手动打开）

WebVTT 文件必须包含 CHAPTER 类型 cue

普通字幕用 WEBVTT + 时间轴文本就行，但章节需要明确声明类型。文件开头必须写 WEBVTT，每段 cue 前加 CHAPTER 标识，否则浏览器会忽略为无效章节。

示例 chapters.vtt：

WEBVTT

CHAPTER
00:00:00.000 --> 00:02:15.000
片头

CHAPTER
00:02:15.000 --> 00:18:30.000
第一部分：背景介绍

CHAPTER
00:18:30.000 --> 00:45:20.000
第二部分：实操演示

注意：CHAPTER 行不能有空格或注释；时间格式严格为 HH:MM:SS.mmm；cue 文本不能跨行（否则可能被截断）。

DeepBI DHTML 页面生成器

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

下载

章节在播放器中是否可见，取决于浏览器和 default 状态

不是所有浏览器都把 kind="chapters" 渲染成可视进度条分段。Safari 最完整：自动在时间轴上打点+悬停显示标题；Chrome 仅在右键“章节”菜单里列出，且需手动启用；Firefox 不显示图形化章节条，只支持键盘快捷键跳转（Shift+→）。

• 如果想强制用户看到章节，得监听 timeupdate 事件，自己读取当前时间并匹配 VTT 中的 cue 范围，再更新自定义 UI
• default 属性只影响是否默认启用轨道，不影响视觉呈现——即使设了 default，Chrome 依然不显示章节条
• 移动端（iOS Safari）支持良好；Android Chrome 几乎不展示章节 UI，仅提供 API 访问

常见失败原因：路径、MIME 类型、CORS

即使标签和 VTT 写对了，章节也不出现，八成卡在这三处：

• 的路径是相对 video 当前路径，不是 HTML 页面路径；建议用绝对路径或检查 Network 面板看是否 404
• Web 服务器必须返回 text/vtt MIME 类型，否则 Chrome/Firefox 直接拒绝加载；Nginx 需加 types { text/vtt vtt; }，Apache 加 AddType text/vtt .vtt
• 如果 video 和 .vtt 在不同域名下，需服务端返回 Access-Control-Allow-Origin，否则 track 加载失败且无明显报错（仅控制台静默警告）

VTT 文件本身语法容错极低：一个多余空格、一个中文冒号、时间格式少一位毫秒，都会让整条 cue 失效。调试时务必打开浏览器开发者工具的 Console 和 Network 标签页看具体提示。

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