Progress bar preview image settings

1. Feature Overview

zwplayer supports displaying video preview thumbnails on the playback progress bar. When the mouse moves over the progress bar, it displays video frame thumbnails corresponding to the time point, allowing users to quickly preview video content.

2. Thumbnail Preparation

2.1 Thumbnail Generation Requirements

To achieve preview images, video frame thumbnails must be extracted from the video in advance, and each video frame thumbnail combined into a single large image, as shown below:

As shown in the example thumbnail above, each extracted video frame thumbnail is combined into a single large image, with 8 small images (video frames) per row, totaling 8 rows. Note: Different videos extract different thumbnails; the number of rows and columns may vary.

Important Notes:

• Thumbnails must be extracted evenly along the video timeline

• Frame interval time = Total video duration ÷ Number of extracted frames

• Frame extraction not following rules may lead to inaccurate preview time points

• The shorter the thumbnail interval, the more precise the preview, but the larger the file size

2.2 Thumbnail Parameter Format

Based on the example thumbnails above, configure thumbnail information according to the following JavaScript object format:

var thumbnailInfo = {
    "url": "http://example.com/images/movie.jpg",
    "width": 128,
    "height": 72,
    "col": 8,
    "row": 8,
    "total": 60
}

2.3 Parameter Description

3. Usage Methods

Method 1: Configuration via Constructor

Set the thumbnails parameter directly during zwplayer initialization:

<script language="javascript">
    window.mainplayer = new ZWPlayer({
    url: 'http://example.com/vod/movie.mp4',
    playerElm: '#player-holder',
    useProgressTooltip: true,   // Whether to enable tooltips on the playback progress bar
    thumbnails: {
    url: 'http://example.com/images/thumbnails.jpg',
    col: 21,
    row: 20,
    width: 128,
    height: 72,
    total: 418
}
});
</script>

Method 2: Configuration via Media Info Object

Set using the thumbnails property of the JavaScript object format url parameter. Example code is as follows:

<script language="javascript">
    var thumbnailInfo = thumbnails: {
    url: 'http://example.com/images/thumbnails.jpg',
    col: 21,
    row: 20,
    width: 128,
    height: 72,
    total: 418
}
    var movieInfo= {
    "type": "dvr",
    "http": "http://example.com/vod/mp4/uh01.mp4",
    thumbnails: thumbnailInfo
};
    window.mainplayer = new ZWPlayer({
    url: movieInfo,
    playerElm:'#player-holder',
    useProgressTooltip: true,   // Whether to enable tooltips on the playback progress bar
});
</script>

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 thumbnail quantity (precision) with file size based on actual requirements