进度条预览图设置

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

2. 示例代码

<!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,   //是否启用播放进度条上的提示
        thumbnails: thumbnails,
        url: 'https://cdn.zwplayer.cn/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. 重要提示

zwplayer 不提供 视频缩略图提取工具，请使用第三方软件生成
设置 useProgressTooltip 为 true, 才会在进度条上显示缩略图
确保缩略图按时间轴均匀分布，以保证预览准确性
根据实际需求平衡缩略图数量（精度）与文件大小

目录导航