Video Playlist Editor — User Guide

Getting Started

The Playlist Editor is a free online tool for creating and managing video playlists. Organize videos into groups, configure metadata (poster, subtitles, chapters, annotations, thumbnails) for each video, then export a ZWMAP JSON file for use with ZWPlayer.

Quick Start Steps

1. Create groups

   Click the "+ New Group" button in the toolbar (or press G) to create your first group. Groups organize videos by topic or series.

2. Add video items

   Select a group, then click "Add Item" (or press N), or use the batch import feature. Three methods are available: paste URLs, drag & drop local files, or import JSON/XML.

3. Configure metadata

   Set poster images, multi-language subtitle tracks, chapter navigation, interactive annotations, thumbnails, and EPG program info for each video item. URL is required; type is auto-detected.

4. Export ZWMAP JSON

   Once configured, click "Export" (or press Ctrl+S) to download the playlist JSON file. This file can be used directly in ZWPlayer configuration.

Keyboard Shortcuts

Speed up your workflow with these keyboard shortcuts:

Group & Item Management

Group Management

Groups organize video items by topic, series, or category. Each group has the following properties:

Item Detail Fields

Each video item supports the following configuration fields:

Import Methods

The Playlist Editor supports multiple import methods to quickly populate your playlist:

URL Import

Paste a list of video URLs, one per line. Supports "URL name" format to specify video names. Lines starting with # are treated as comments. Ideal for quickly importing existing online video resources.

# Comment lines start with #
https://cdn.example.com/video1.mp4 Episode 1
https://cdn.example.com/video2.mp4 Episode 2
https://cdn.example.com/video3.mp4

File Import

Drag and drop local files into the editor window. Supports video files and matching auxiliary files. The system automatically classifies and associates files by base name.

File Type Recognition Rules

The system uses a three-phase detection strategy: 1) ZWMAP protocol header (zwp_type), 2) filename suffix keywords, 3) content structure analysis. ZWMAP protocol header (zwp_type), 2) filename suffix keywords, 3) content structure analysis. ZWMAP protocol header (zwp_type), 2) filename suffix keywords, 3) content structure analysis.

JSON Import

Import a ZWMAP playlist JSON file. The tool parses groups and items, merging them into the current playlist. Useful for restoring or migrating data from existing configurations.

XML Import

Import a compatible XML playlist file. The tool automatically converts the XML structure to ZWMAP format.

Bulk Operations & Templates

Select multiple items and use bulk operations to modify their properties simultaneously. Path templates support variable substitution:

Template Variables

Bulk Operation Types

ZWMAP Playlist Protocol Specification

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

Protocol Header

Every ZWMAP playlist document begins with a protocol identifier:

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

Data Structure

A playlist consists of a groups array, where each group contains an items array:

Item Fields

Complete Example

{
  "zwp_protocol": "ZWMAP/1.0",
  "zwp_type": "playlist",
  "zwp_version": "1.0",
  "groups": [
    {
      "name": "Course Series",
      "id": "group-1",
      "items": [
        {
          "name": "Episode 1",
          "id": "item-1",
          "url": "https://cdn.example.com/video1.mp4",
          "type": "auto",
          "poster": "https://cdn.example.com/poster1.jpg",
          "subtitle": [
            { "url": "https://cdn.example.com/sub1-en.vtt", "label": "English", "lang": "en" },
            { "url": "https://cdn.example.com/sub1-zh.vtt", "label": "中文", "lang": "zh" }
          ],
          "chapter": "https://cdn.example.com/chapter1.json",
          "annotation": "https://cdn.example.com/annotation1.json",
          "thumbnail": "https://cdn.example.com/thumb1.json",
          "watermark": "https://cdn.example.com/watermark1.json"
        },
        {
          "name": "Episode 2",
          "id": "item-2",
          "url": "https://cdn.example.com/video2.mp4"
        }
      ]
    },
    {
      "name": "Live Channels",
      "id": "group-2",
      "items": [
        {
          "name": "News Live",
          "url": "https://live.example.com/news.m3u8",
          "type": "hls",
          "isLive": true,
          "epg": "News Broadcast"
        }
      ]
    }
  ]
}

This example shows a playlist with two groups, each containing two video items with common metadata configurations.

ZWPlayer Integration

ZWPlayer is a full-featured JavaScript video player with native playlist support. Here's how to integrate the generated playlist with ZWPlayer.

Player Configuration

Add the playlist property to your ZWPlayer initialization config:

var player = new ZWPlayer({
  playerElm: 'mse',
  url: 'https://cdn.example.com/video1.mp4',
  playlist: {
    groups: [
      {
        name: 'Course Series',
        items: [
          { name: 'Episode 1', url: 'https://cdn.example.com/video1.mp4' },
          { name: 'Episode 2', url: 'https://cdn.example.com/video2.mp4' }
        ]
      }
    ]
  }
});

Configuring Base URL

Set the Base URL in the editor toolbar header. When exporting, it is automatically prepended to local filenames. If your videos already use full URLs, no Base URL is needed.

Using a JSON URL

Upload the exported ZWMAP JSON file to your web server, then pass the URL directly to the playlist property:

var player = new ZWPlayer({
  playerElm: 'mse',
  url: 'https://cdn.example.com/video1.mp4',
  playlist: 'https://cdn.example.com/playlist/playlist-zwmap.json'
});

Frequently Asked Questions