进度条预览图生成器：缩略图雪碧图一键制作
在 B 站或 YouTube 上拖进度条，悬停处会弹出画面预览——这个体验的底层不是「每个时间点一张图的网络请求」，而是一张雪碧图（sprite sheet）：把整段视频按固定间隔抽出的帧拼成一张大图，配一份「第 N 格对应第 M 秒」的映射 JSON。播放器悬停时按坐标裁切显示，零额外请求、毫秒级响应。ZWPlayer 的在线缩略图生成器把这个制作过程做成了一键操作。
原理三十秒
视频 ──按间隔抽帧──► N 张小图 ──拼接──► 1 张雪碧图
└──► 映射 JSON(时间 → 坐标)
播放器悬停进度条 ──查表──► 裁切雪碧图对应格 ──► 显示预览两个关键参数：抽帧间隔（每几秒一帧，决定预览粒度）与缩略图尺寸（决定单格清晰度与整图体积）。
三步制作
- 加载视频：粘贴 URL 或拖入本地文件——视频在浏览器内解析抽帧，不上传；
- 设置参数并生成：间隔、尺寸、列数，点生成，实时看到抽帧进度与成图；
图 1:生成完成——抽帧网格与统计一目了然
- 导出：下载雪碧图 + ZWMAP thumbnail JSON，两份资产交给播放器。
图 2:生成器主界面——左侧参数、中间预览
预览：播放器端效果
点「预览」进入真实 ZWPlayer——生成的雪碧图直接挂到播放器上：鼠标悬停进度条，对应时间点的画面预览即时弹出，这就是观众端的样子。
图 3:预览——悬停进度条,对应时刻的画面预览弹出
接入播放器
new ZWPlayer({
playerElm: 'player',
url: 'lesson.mp4',
thumbnails: '/thumbs/lesson.json', // ZWMAP thumbnail JSON(内含雪碧图地址与映射)
});一个参数完成接入——悬停进度条即出预览。与章节标注、播放列表叠加时，章节分割线与缩略图预览同屏协作，导航体验直接对齐主流视频平台。
体积与体验的平衡建议
- 间隔：教程/讲座类 5～10 秒一帧够用；影视内容 2～5 秒更顺滑;
- 尺寸：160×90 是体验与体积的甜点；4K 素材也建议缩到这个档——预览图要的是「认出画面」不是看清细节;
- 长视频：2 小时内容按 10 秒间隔约 720 帧，一张图偏大时可分多张雪碧图分段映射（JSON 支持多图条目）;
- 懒人路线：本地视频库批量生成可配合 ZWScan——扫描时自动匹配同名缩略图 JSON。