Progress Preview

1. Progress Bar 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.cn/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.cn/media/b44c43c90be3521bc352aad1e80f9cd0_thumb.jpg",
        "width": 160,
        "height": 90,
        "row": 9,
        "col": 9,
        "total": 74
    };

    var info = {
        playerElm: 'mse',
        autoplay: false,
        useProgressTooltip: true,   // Whether to enable tooltips on the playback progress bar
        thumbnails: thumbnails,
        url: 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4'
    };

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

3. thumbnails Object Properties

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

4. Important Notes

zwplayer does not provide video thumbnail extraction tools; please use third-party software to generate them
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) with file size according to actual requirements

Catalog Navigation