视频缩略图预览条 - 视频工具 · 萤炬工具箱

视频缩略图预览条批量截帧后合成一张雪碧图（多帧拼在一张大图里），同时生成配套的 WebVTT 索引文件。这两个文件配合起来就是播放器进度条上鼠标悬停时看到的小预览图。自建站点、课程平台、内部视频库要做这个功能时，用它一次产出两个文件，比手写脚本快得多。产出两个文件：雪碧图（拼合缩略图）+ .vtt 索引。

视频缩略图预览条批量截帧后合成一张雪碧图（多帧拼在一张大图里），同时生成配套的 WebVTT 索引文件。这两个文件配合起来就是播放器进度条上鼠标悬停时看到的小预览图。自建站点、课程平台、内部视频库要做这个功能时，用它一次产出两个文件，比手写脚本快得多。

使用步骤

1. 选择视频，设定截帧间隔（间隔越小预览越细、雪碧图越大）。
2. 设定单帧缩略尺寸与每行排列数量。
3. 执行生成，得到一张雪碧图 + 一个 .vtt 文件。
4. 两个文件一起下载，按播放器文档配到 thumbnails track 上。

功能与限制

• 产出两个文件：雪碧图（拼合缩略图）+ .vtt 索引。
• 可调截帧间隔、单帧尺寸与每行数量。
• 本地处理不上传；接入播放器需按实际部署路径修正 VTT 中的图片引用。

常见问题

雪碧图和 WebVTT 是怎么配合工作的？

VTT 里每条记录写着某个时间段对应雪碧图上的哪块矩形区域（用 #xywh 坐标标注）。播放器读 VTT，按鼠标位置对应的时间去雪碧图上裁那一小块显示出来。

截帧间隔选多少合适？

短视频用 2 到 5 秒，长视频用 10 秒左右。间隔太小会让雪碧图变得非常大，反而拖慢播放页面的加载。

主流播放器都支持吗？

video.js、Plyr、Artplayer 等常见播放器都有对应的缩略图插件或内置配置，格式就是雪碧图加 VTT 这一套，接进去即可。

生成的 VTT 里的图片路径要改吗？

要按你实际的部署路径改一下 VTT 里引用的图片文件名或 URL，否则播放器找不到雪碧图。