如何制作videojs-preview-thumbnails所需的视频预览缩略图拼接图

最优方案：单条FFmpeg命令一步生成（无需中间零散帧） #

直接用以下命令即可输出符合要求的拼接雪碧图，可根据实际需求调整参数：
ffmpeg -i 你的视频路径.mp4 -vf "fps=1,scale=160:-1,tile=10xN" -q:v 2 输出拼接图.jpg
参数说明：

• fps=1：抽帧频率，1代表每秒抽取1帧，需要每3秒抽1帧则改为fps=1/3，数值越小抽帧越少、拼接图体积越小
• scale=160:-1：单张缩略图宽度固定为160px，高度等比自适应，可根据需要修改宽度数值
• tile=10xN：每行排列10张缩略图，总列数N根据实际抽帧数量自动计算，可修改每行的排列数量
• -q:v 2：JPG输出质量，取值范围1-31，数值越小质量越高、体积越大

备选方案：已有零散帧的合并方法 #

如果你已经提前用FFmpeg导出了单独的帧图片，用以下命令合并即可：
ffmpeg -pattern_type glob -i '帧文件匹配规则/*.jpg' -vf tile=10xN -q:v 2 输出拼接图.jpg
将帧文件匹配规则替换为你的零散帧文件名通配规则即可，其余参数和上述规则一致。

插件配套配置注意 #

生成拼接图后，需要在videojs-preview-thumbnails的配置项中对应填写单张缩略图的宽高、抽帧间隔、每行缩略图数量，插件才能正确定位悬停位置对应的帧画面。

内容的提问来源于stack exchange，提问作者Nicola