Progress Bar Preview Thumbnail Settings

1. Progress Bar Preview Thumbnail Settings Demo

2. Example Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8" src="https://cdn.zwplayer.com/v3/zwplayer/zwplayer.js"></script>
</head>

<body>
<div class="video" id="mse" style="width: 1280px;height: 720px; margin: 0 auto;"></div>
<script type="text/javascript">
    var thumbnails = {
        "url": "https://cdn.zwplayer.com/media/b44c43c90be3521bc352aad1e80f9cd0_thumb.jpg",
        "width": 160,
        "height": 90,
        "row": 9,
        "col": 9,
        "total": 74
    };

    var info = {
        playerElm: 'mse',
        autoplay: false,
        fluid: true,
        ratio: "16:9",
        useProgressTooltip: true,   //Whether to enable the tooltip on the playback progress bar
        thumbnails: thumbnails,
        url: 'https://cdn.zwplayer.com/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4'
    };

    new ZWPlayer(info);
</script>
</body>
</html>

3. thumbnails Object Properties Description

Parameter Name	Type	Description
url	string	Thumbnail access URL (supports JPG/PNG formats)
width	number	Width of a single thumbnail (in pixels)
height	number	Height of a single thumbnail (in pixels)
col	number	Number of thumbnails per row
row	number	Total number of thumbnail rows
total	number	Total number of valid thumbnails

4. Methods for Passing Thumbnails

The thumbnails parameter supports the following three input formats:

4.1 Passing an Object Directly

thumbnails: {
    url: 'http://example.com/images/thumbnail.jpg',
    col: 21,
    row: 20,
    width: 128,
    height: 72,
    total: 418
}

4.2 Passing a JSON URL

thumbnails: 'http://example.com/thumbnails/movie_thumbnail.json'

The JSON file must follow the ZWMAP protocol format:

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

4.3 Drag-and-Drop File Loading

Drag and drop the thumbnail JSON file onto the player to load it automatically. You can also drag in both the video file and the thumbnail JSON + sprite image simultaneously; the player will automatically match them by filename (e.g., video.mp4 matches video_thumbnail.json).

5. Important Notes

Set useProgressTooltip to true to display thumbnails on the progress bar.
Ensure thumbnails are evenly distributed along the timeline to guarantee preview accuracy.
Balance the number of thumbnails (precision) against file size according to actual requirements.