Video Thumbnail Sprite Sheet Generator — User Guide

Getting Started

The Thumbnail Sprite Generator is a free online tool that extracts frames from your video and assembles them into a single sprite sheet image. This sprite sheet powers the thumbnail preview that appears when you hover over a video player's progress bar — providing users with a visual scrubbing experience similar to YouTube, Bilibili, or Tencent Video.

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 address bar and press Enter.

2. Configure sampling

   Choose a sampling mode: Fixed Interval (e.g., every 5 seconds) or Total Frames (e.g., 100 frames evenly distributed). Adjust frame dimensions and output format. (e.g., every 5 seconds) or Total Frames (e.g., 100 frames evenly distributed). Adjust frame dimensions and output format.

3. Generate the sprite sheet

   Click the Generate Sprite Sheet button (or press G). The tool extracts frames and assembles them into a single image grid. button (or press G). The tool extracts frames and assembles them into a single image grid.

4. Preview and export

   Preview the result with ZWPlayer's built-in thumbnail preview (press P). Download the sprite image, export the ZWMAP JSON, or get both in a ZIP file.

Keyboard Shortcuts

Speed up your workflow with these keyboard shortcuts:

Configuration Options

Sampling Mode

Frame Dimensions

Grid Layout

Output Settings

Output Formats

After generating a sprite sheet, you can download the results in three formats:

1. Sprite Sheet Image

A single image file (thumbnail.jpg or .png) containing all extracted frames arranged in a grid. This is the primary output used by video players to display thumbnail previews on the progress bar.

2. ZWMAP JSON

A JSON file ({title}_thumbnail.json) following the ZWMAP/1.0 protocol. Contains the thumbnail image URL, frame dimensions, grid layout, and total frame count. Used for server-side configuration and CMS integration.

3. ZIP Bundle

A ZIP archive ({title}.zip) containing both the thumbnail image and the ZWMAP JSON file. Convenient for downloading and deploying as a package.

ZWMAP Thumbnail Protocol Specification

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

Protocol Header

Every ZWMAP thumbnail document begins with a protocol identifier:

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

Thumbnail Object Fields

Complete Example

{
  "zwp_protocol": "ZWMAP/1.0",
  "zwp_type": "thumbnail",
  "zwp_version": "1.0",
  "thumbnail": {
    "url": "https://cdn.example.com/thumbnails/thumbnail.jpg",
    "width": 160,
    "height": 90,
    "col": 10,
    "row": 10,
    "total": 100
  }
}

This example describes a 10×10 sprite sheet containing 100 frames, each 160×90 pixels. When a user hovers over the video progress bar, the player calculates which frame to display based on the hover position relative to the total duration.

ZWPlayer Integration

ZWPlayer is a full-featured JavaScript video player that supports thumbnail preview out of the box. Here's how to integrate the generated sprite sheet with ZWPlayer.

Player Configuration

Add the thumbnails property to your ZWPlayer initialization config:

var player = new ZWPlayer({
  playerElm: 'mse',
  url: 'https://cdn.example.com/video.mp4',
  thumbnails: {
    url: 'https://cdn.example.com/thumbnails/thumbnail.jpg',
    width: 160,
    height: 90,
    row: 10,      // rowsize = ZWMAP's "col" value
    total: 100
  }
});

Copy Config from Tool

The tool provides a ready-to-use ZWPlayer configuration snippet in the JSON panel after generation. Click the copy button to copy it directly.

Live Preview

Press P or click the Preview button to open a full ZWPlayer instance with your generated sprite sheet. Hover over the progress bar to see the thumbnail preview in action. Press Esc to exit.

Using ZWMAP JSON

If you store thumbnails on a server, serve the ZWMAP JSON file at a known URL. Your application can fetch it and pass the parsed thumbnail object directly to ZWPlayer's config (with the col → row mapping).

Using a JSON URL

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

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

Drag & Drop Loading

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

• Thumbnail JSON only: Drop a *_thumbnail.json file onto the player to load thumbnails for the currently playing video.
• Video + Thumbnail together: Drag a video file along with its thumbnail JSON and sprite image — the player will auto-match them by filename (e.g., movie.mp4 matches movie_thumbnail.json).
• Playlist drag: Drop multiple videos with their thumbnails to create a playlist with thumbnail previews for each item.

Frequently Asked Questions