Video Chapter Editor — User Guide

Getting Started

The Chapter Editor is a free online tool that lets you add chapter markers to your videos. Chapters allow viewers to quickly jump to specific sections — similar to YouTube's chapter feature. After editing, export a ZWMAP JSON file for easy integration with websites and CMS platforms.

Quick Start Steps

1. Load a video

   Drag and drop a local video file (MP4, WebM) onto the window, or paste a remote video URL into the input field and click "Load".

2. Add chapters

   Click the "New Chapter" button or press N to quickly create a new chapter. The chapter will be automatically positioned at the current playback time.

3. Set titles and times

   Fill in the title (required) for each chapter and adjust the start time. Click the "Use Current Time" button to set the chapter start point to the current playback position precisely.

4. Preview and export

   Press P or click the Preview button to see how chapters appear in the player. Once satisfied, click "Export" to download the ZWMAP JSON file.

Keyboard Shortcuts

Speed up your workflow with these keyboard shortcuts:

Working with Chapters

Learn about the chapter properties and features available in the editor:

Chapter Properties

Convenience Features

• The "Use Current Time" button sets the chapter start point to the current video playback position precisely, eliminating manual input.
• The "Capture Current Frame" button extracts the current video frame as a chapter thumbnail. Note: remote videos may be blocked by cross-origin policy.
• The waveform visualization displays an audio waveform below the progress bar, helping you locate chapter split points by audio characteristics. Loading remote videos may require additional confirmation.
• Drag to reorder: drag chapters in the list to adjust their order. Times are recalculated automatically.

Text Import Guide

The Chapter Editor supports bulk importing chapter data from text, with several common timeline formats:

Supported Formats

YouTube Format

Timestamp and title separated by a space, supports H:MM:SS or M:SS format:

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

Bilibili Format

Similar to YouTube format, titles can be in any language:

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

Plain Timestamp

Contains only timestamps; titles are auto-generated as "Untitled Chapter":

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

How to Use

1. Click the "Text Import" button in the JSON panel to open the import dialog.
2. Paste the timeline text into the text box, one chapter per line.
3. Click "Parse & Import" — the editor will auto-detect the format and import the chapters.

ZWMAP Chapter Protocol Specification

The ZWMAP (Z&W Media Annotation Protocol) chapter type defines a standard JSON format for describing video chapters. This protocol enables interoperability between chapter editing tools and video players.

Protocol Header

Every ZWMAP chapter document begins with a protocol identifier:

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

Chapter Object Fields

Complete Example

{
  "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" }
    }
  ]
}

This example defines a video with 3 chapters, each specifying a title, start time, and marker color.

ZWPlayer Integration

ZWPlayer is a full-featured JavaScript video player with built-in chapter support. Here's how to integrate your edited chapters with ZWPlayer.

Player Configuration

Add the chapters property to your ZWPlayer initialization config:

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" }
    }
  ]
});

Segment Looping

ZWPlayer supports segment looping (AB loop) with two methods:

Progress Bar AB Loop

Enable the segmentButton option to display a segment selection button on the control bar. Click the button to activate, then drag the start and end handles on the progress bar to define the loop range. The video will continuously loop within the selected segment.

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

Chapter Loop Playback

In the chapter search panel, each chapter has a loop button. Click it to loop playback within that chapter's time range. When the playback reaches the end of the chapter, it automatically jumps back to the beginning. Seeking or clicking another loop button cancels the current loop.

Using a JSON URL

Instead of passing an array, you can pass the ZWMAP JSON file URL as a string. ZWPlayer will fetch and parse it automatically:

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

Drag & Drop Loading

You can also load chapters by dragging files directly onto the ZWPlayer instance:

• Chapter JSON only: Drop a *_chapter.json file onto the player to load chapters for the currently playing video.
• Video + Chapter together: Drag a video file along with its chapter JSON — the player will auto-match them by filename (e.g., movie.mp4 matches movie_chapter.json).
• Playlist drag: Drop multiple videos with their chapter files to create a playlist with chapter markers for each item.

Chapter Search

When chapters are loaded, click the chapter button on the control bar to open the chapter search panel. Type a keyword to instantly filter chapters by title or description. Matching text is highlighted in the results. Click any result to jump to that chapter. The panel supports drag-and-drop repositioning and can be closed with the close button or by pressing Esc.

Frequently Asked Questions