进度条预览图设置

1. 功能概述

zwplayer 支持在播放进度条上显示视频预览图。当鼠标在进度条上移动时，会显示对应时间点的视频帧缩略图，方便用户快速预览视频内容。

2. 缩略图准备

2.1 缩略图生成要求

要实现预览图，必须提前从视频中抽取视频帧缩略图，并将每个视频帧缩略图拼合成一张大图，如下图所示：

如上图所示的示例缩略图，提取的每个视频帧缩略图被拼合成一张大图，每行8个小图（视频帧），共8行。注意：不同的视频抽取的缩略图都是不一样的，行数与列数可能都不相同。

注意事项：

• 缩略图需按视频时间轴均匀抽取

• 每帧间隔时间 = 视频总时长 ÷ 抽取帧数

• 不按规则抽帧可能导致预览时间点不准确

• 缩略图间隔越短，预览越精准，但文件尺寸越大

2.2 缩略图参数格式

根据以上示例缩略图，需要按照以下 JavaScript 对象格式配置缩略图信息：

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

2.3 参数说明

3. 使用方法

方法一：通过构造函数配置

在在zwplayer初始化时直接设置 thumbnails 参数：

<script language="javascript">
    window.mainplayer = new ZWPlayer({
    url: 'http://example.com/vod/movie.mp4',
    playerElm: '#player-holder',
    useProgressTooltip: true,   //是否启用播放进度条上的提示
    thumbnails: {
    url: 'http://example.com/images/thumbnails.jpg',
    col: 21,
    row: 20,
    width: 128,
    height: 72,
    total: 418
}
});
</script>

方法二：通过媒体信息对象配置

用 JavaScript 对象格式 url 参数的属性thumbnails来设置，示例代码如下：

<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,   //是否启用播放进度条上的提示
});
</script>

4. 重要提示

• zwplayer 不提供 视频缩略图提取工具，请使用第三方软件生成

• 设置 useProgressTooltip 为 true, 才会在进度条上显示缩略图

• 确保缩略图按时间轴均匀分布，以保证预览准确性

• 根据实际需求平衡缩略图数量（精度）与文件大小