如何生成雪碧图和 WEBVTT

什么是 FFmpeg？

FFmpeg 是一个强大的开源多媒体框架，能够处理几乎所有类型的音频和视频文件。它包含了一系列用于录制、转换和流媒体处理的工具和库，被广泛应用于视频编辑、转码、直播等领域。FFmpeg 最强大的特点在于它的命令行界面，可以通过简单的命令完成复杂的多媒体处理任务。

什么是雪碧图(Sprite Sheet)？

雪碧图（Sprite Sheet）是一种将多个小图像合并到一张大图中的技术，最初用于网页设计以减少HTTP请求，现在也广泛应用于游戏开发和视频处理领域。在视频处理中，雪碧图通常用于：

• 创建视频缩略图预览
• 生成视频关键帧集合
• 制作动画序列
• 视频内容分析预览

为什么使用 FFmpeg 生成雪碧图？

FFmpeg生成雪碧图具有以下优势：

1. 高效快速：直接处理视频文件，无需中间步骤
2. 灵活可控：可以精确控制截图间隔、质量和布局
3. 批量处理：适合处理大量视频文件

使用 FFmpeg 生成雪碧图的基本方法

基本雪碧图生成命令

以下命令可以从视频中每隔 10 秒截取一帧，生成5x5的雪碧图：

ffmpeg -i input.mp4 -vf "fps=1/10,scale=160:90,tile=5x5" -qscale:v 3 output.jpg

参数解释：

• -i input.mp4：输入视频文件
• fps=1/10：fps 是每秒帧数，fps=1 表示每秒取一帧，fps=0.5 表示每两秒取一帧，此处是每 10 秒取一帧
• scale=160:90：将每帧宽度调整为 160*90 像素
• tile=5x5：将图像排列成5行5列的网格
• -qscale:v 3：输出质量（1-31，数值越小质量越高）
• output.jpg：输出雪碧图文件

输出格式选择

FFmpeg支持多种输出格式，常见的有：

• JPG：output.jpg（有损压缩，文件较小）
• PNG：output.png（无损压缩，文件较大但质量更好）
• WebP：output.webp（现代格式，压缩率高）

常见问题解决

1. 保持原始宽高比：

   使用scale=-1:180可以固定高度为 180 像素，宽度按比例计算

2. webp 只能生成一张

   FFMPEG 7.1 版本确实在生成 webp 格式的雪碧图时，只能生成一张，不支持多张

生成 WEBVTT

为长视频创建缩略图预览

通过上面的知识，我们可以通过以下命令将一个视频的所有缩略图全部生成。

ffmpeg -i input.mp4 -vf "fps=0.5,scale=160:90,tile=8x8" -q:v 10 sprite_%02d.png

然后根据生成的文件数量，计算 webvtt。

比如视频时长是 5 分钟的，每 2 秒截一帧，总共是 150 帧，一个雪碧图 8*8，150/64=2.5，即三张雪碧图，但第三张未满。

两个 for 循环，遍历行列，webvtt 的每个 cue 递增 2 秒，路径参数递增 x,y 轴，每次递增 160。

这样的做法会导致 webvtt 的总时长超过视频时长，但网页播放器的进度条是按照视频时长加载的，不用担心会出问题。更稳点你也可以 ffmpeg 增加 showinfo 参数获取生成信息，明确总共有多少张，每张间隔多少秒。

ffmpeg -i input.mp4 -vf "fps=0.5,showinfo,scale=160:90,tile=8x8" -q:v 10 sprite_%02d.png

最终 WEBVTT 生成效果是这样

WEBVTT00:00:00.000 --> 00:00:02.000
sprite_01.webp#xywh=0,0,160,9000:00:02.000 --> 00:00:04.000
sprite_01.webp#xywh=160,0,160,90

EasyDSS

EasyDSS 采用 WEBVTT 的方案，提供进度条预览图。

如果你对网页端播放具体实现很感兴趣，可以查看下一期文章了解更多。

点击查看 easydss 论坛

欢迎来到论坛一起讨论