视频章节编辑器 — 使用指南

快速入门

章节编辑器是一款免费的在线工具，可以为视频添加章节标记。章节功能让观众能够快速跳转到感兴趣的内容段落，类似于 YouTube 视频的章节功能。编辑完成后，可以导出 ZWMAP 协议的 JSON 文件，方便集成到网站和 CMS 系统中。

快速上手步骤

1. 加载视频

   将本地视频文件（MP4、WebM）拖拽到窗口中，或者在输入框中粘贴远程视频 URL 并点击"加载"按钮。

2. 添加章节

   点击"新建章节"按钮，或按 N 键快速创建一个新章节。章节会自动定位到当前播放时间点。

3. 设置标题和时间

   为每个章节填写标题（必填），并调整开始时间。点击"使用当前时间"按钮可以将章节起点精确设置为当前播放位置。

4. 预览和导出

   按 P 键或点击预览按钮查看章节在播放器中的实际效果。确认无误后，点击"导出"按钮导出 ZWMAP JSON 文件。

键盘快捷键

使用以下键盘快捷键提高工作效率：

章节编辑

了解章节编辑器的各项属性和功能：

章节属性

便捷功能

• "使用当前时间"按钮可以将章节起点精确设置为视频当前播放位置，无需手动输入时间。
• "截取当前帧"按钮可以将当前视频画面截取为章节缩略图。注意：远程视频可能因跨域策略限制而无法截取。
• 波形可视化功能会在进度条下方显示音频波形图，帮助您通过音频特征定位章节分割点。加载远程视频时可能需要额外确认。
• 支持拖拽排序：在章节列表中拖动章节即可调整顺序，时间会自动重新计算。

文本导入指南

章节编辑器支持从文本批量导入章节数据，支持多种常见的时间轴格式：

支持的格式

YouTube 格式

时间戳和标题用空格分隔，支持 H:MM:SS 或 M:SS 格式：

0:00 Introduction
1:20 Installation Guide
5:30 Basic Usage
12:00 Advanced Features
25:15 Summary

B站格式

与 YouTube 格式类似，标题可以使用中文：

00:00 开场白
01:20 安装教程
05:30 基础用法
12:00 高级功能
25:15 总结

纯时间格式

仅包含时间戳，标题自动生成为"未命名章节"：

00:00
01:20
05:30
12:00
25:15

如何使用

1. 在 JSON 面板中点击"文本导入"按钮，打开导入对话框。
2. 将时间轴文本粘贴到文本框中，每行一个章节。
3. 点击"解析并导入"按钮，系统会自动识别格式并导入章节。

ZWMAP 章节协议规范

ZWMAP（Z&W 媒体标注协议）章节类型定义了描述视频章节的标准 JSON 格式。该协议实现了章节编辑工具与视频播放器之间的互操作性。

协议头部

每个 ZWMAP 章节文档以协议标识符开头：

{
  "zwp_protocol": "ZWMAP/1.0",
  "zwp_type": "chapter",
  "zwp_version": "1.0"
}

章节对象字段

完整示例

{
  "zwp_protocol": "ZWMAP/1.0",
  "zwp_type": "chapter",
  "zwp_version": "1.0",
  "chapters": [
    {
      "title": "Introduction",
      "start_time": "00:00:00.000",
      "style": { "background": "#e74c3c" }
    },
    {
      "title": "Installation",
      "start_time": "00:01:20.000",
      "style": { "background": "#3498db" }
    },
    {
      "title": "Basic Usage",
      "start_time": "00:05:30.000",
      "style": { "background": "#2ecc71" }
    }
  ]
}

此示例定义了一个包含 3 个章节的视频，每个章节指定了标题、开始时间和标记颜色。

ZWPlayer 集成

ZWPlayer 是一个功能丰富的 JavaScript 视频播放器，开箱即用支持章节功能。以下是如何将编辑好的章节数据集成到 ZWPlayer 中。

播放器配置

在 ZWPlayer 初始化配置中添加 chapters 属性：

var player = new ZWPlayer({
  playerElm: 'mse',
  url: 'https://cdn.example.com/video.mp4',
  chapters: [
    {
      title: "Introduction",
      start_time: "00:00:00.000",
      style: { background: "#e74c3c" }
    },
    {
      title: "Installation",
      start_time: "00:01:20.000",
      style: { background: "#3498db" }
    },
    {
      title: "Basic Usage",
      start_time: "00:05:30.000",
      style: { background: "#2ecc71" }
    }
  ]
});

片段循环

ZWPlayer 支持两种片段循环方式：

进度条 AB 循环

启用 segmentButton 选项后，控制栏会显示片段选择按钮。点击按钮激活后，拖动进度条上的起始和结束手柄定义循环范围，视频将在选定片段内持续循环播放。

var player = new ZWPlayer({
  playerElm: 'mse',
  url: 'https://cdn.example.com/video.mp4',
  segmentButton: true
});

章节循环播放

在章节搜索面板中，每个章节旁都有一个循环按钮。点击后，视频将在该章节的时间范围内循环播放。播放到章节结尾时自动跳回开头。拖动进度条或点击其他循环按钮可取消当前循环。

使用 JSON URL

除了直接传入数组，还可以将 ZWMAP JSON 文件的 URL 作为字符串传入，ZWPlayer 会自动获取并解析：

var player = new ZWPlayer({
  playerElm: 'mse',
  url: 'https://cdn.example.com/video.mp4',
  chapters: 'https://cdn.example.com/chapters/movie_chapter.json'
});

拖拽加载

您还可以通过将文件直接拖拽到 ZWPlayer 播放器上来加载章节：

• 单独拖拽章节 JSON：将 *_chapter.json 文件拖入播放器，为当前播放的视频加载章节。
• 同时拖拽视频和章节：将视频文件与对应的章节 JSON 一起拖入，播放器会自动按文件名匹配（例如 movie.mp4 匹配 movie_chapter.json）。
• 播放列表拖拽：拖入多个视频及对应的章节文件，自动创建带章节的播放列表。

章节搜索

加载章节后，点击控制栏上的章节按钮打开章节搜索面板。输入关键词可即时按标题或描述筛选章节，匹配文字高亮显示。点击搜索结果可跳转到对应章节。面板支持拖拽移动，点击关闭按钮或按 Esc 键关闭。

常见问题