进度条预览图设置

1. 进度条预览图设置演示

2. 示例代码

<!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,   //是否启用播放进度条上的提示
        thumbnails: thumbnails,
        url: 'https://cdn.zwplayer.com/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4'
    };

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

3. thumbnails 对象属性说明

参数名	类型	说明
url	string	缩略图访问地址（支持 JPG/PNG 格式）
width	number	单张缩略图宽度（像素）
height	number	单张缩略图高度（像素）
col	number	每行缩略图数量
row	number	缩略图总行数
total	number	有效缩略图总数

4. 缩略图传入方式

thumbnails 参数支持以下三种传入格式：

4.1 直接传入对象

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

4.2 传入 JSON URL 地址

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

JSON 文件需遵循 ZWMAP 协议格式：

{
    "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 拖拽文件加载

将缩略图 JSON 文件拖拽到播放器上即可自动加载。也可同时拖入视频文件和缩略图 JSON + 雪碧图图片，播放器会自动按文件名匹配（如 video.mp4 匹配 video_thumbnail.json）。

5. 重要提示

设置 useProgressTooltip 为 true, 才会在进度条上显示缩略图
确保缩略图按时间轴均匀分布，以保证预览准确性
根据实际需求平衡缩略图数量（精度）与文件大小