WebVTT 章节编辑器：给视频加目录导航
一小时的技术分享回放、四十分钟的课程——没有目录的视频，观众找内容只能拖运气。章节（Chapters）是长视频的目录：进度条分段、悬浮显示章节名、点击即跳。ZWPlayer 的章节编辑器把打章节点做成「对着视频点几下」的事。
界面与时间轴：边看边标
编辑器中央是视频画布，其上叠加章节标记；下方时间轴随播放推进，已定义的章节区间实时分段显示。左侧章节列表管理全部章节，右侧属性面板编辑选中章节的细节。
图 1:编辑器——视频画布、时间轴章节分段与章节列表(开场/人物登场/决斗与转折)
打章节点：三分钟上手
- 加载视频：粘贴 URL 或拖入本地文件（浏览器内解析，不上传）；
- 播放到章节起点，点「添加章节」——时间戳自动取自播放头，比手写精确得多；
- 在属性面板完善信息：标题、（可选）描述、背景色、配图——这些会在播放器端的章节提示里呈现。
微调不必重来：选中章节后可逐帧挪动起止点（配合 , . 逐帧），起止冲突有校验提示；撤销/重做随时兜底。
导出：WebVTT 与 JSON 双格式
JSON 面板实时展示章节数据，支持直接编辑、复制、导出。两种格式按消费端选：
- WebVTT（.vtt）：网页与 HLS 生态的标准，
<track>原生支持； - JSON（ZWMAP chapters）：ZWPlayer 配置直挂，可携带描述/背景色等扩展字段。
图 2:JSON 面板——章节数据所见即所得
播放器端效果：观众看到的目录
点「预览」进入真实 ZWPlayer——这就是观众端的样子：进度条按章节分段、悬停浮出章节名提示、控制条的章节面板列全部章节，点选即跳。
图 3:播放器端——章节面板列全部章节,进度条三段分段
接入自己的页面：
new ZWPlayer({
playerElm: 'player',
url: 'talk.mp4',
chapters: '/chapters/talk.vtt', // 或 .json
});章节格式（VTT）长这样：
WEBVTT
Chapter 1
00:00:08.000 --> 00:01:05.000
开场：远古传说想了解 VTT 章节标记的格式规范，见《WebVTT 章节标记开发者指南》。
章节设计四原则
- 粒度 3～8 分钟：比这细像书签轰炸，比这粗等于没分；
- 命名说人话：「三、核心算法原理（二）」不如「算法原理：为什么快」；
- 开头必有目录章：0 秒处放「本期看点」，观众 30 秒决定去留；
- 与缩略图叠加：章节刻度配进度条预览图，导航体验对齐主流平台。
进阶：与播放列表协作
剧集场景里，播放列表编辑器允许每条目挂各自章节——跨集连续编号（第 1 集 3 章 + 第 2 集 4 章）在列表面板里呈现为整季目录。配合双语字幕与字幕搜索（搜台词跳章节）就是完整的「视频书」体验。
常见问题
章节不显示？ 依次检查：文件可达（网络面板）、时间戳格式（VTT 用 . 分隔毫秒）、章节时间是否超出视频时长。
章节能改颜色/样式吗？ 属性面板的背景色等字段经 ZWMAP JSON 传递，播放器端渲染章节提示时生效。
导入已有 SRT/VTT 章节改稿？ 「导入」支持 VTT/JSON 直接进编辑器继续改。