在写技术文档的时候,为了演示方便,经常需要插入一些短小的视频资源。比如一些操作的录频、一些经典视频片段、一些科普动画等。由于展示的地方通常是网页,而如果是插入视频之类的资源,通常需要占用额外的存储,而且也需要可用的视频播放器的支持,非常不便。对于命令行操作的回放,我们可能会采用 Asciinema,但是这个方案对非终端的操作无法模拟。一个常见的方案是把需要的资源转换成网页支持的 GIF、WEBP 格式等动图。考虑到各大浏览器对 GIF 格式的支持最稳定,因此大部分情况下我们都想将待展示的短小视频转换成 GIF 格式,方便直接插入文档中。
将视频转为 GIF 并对 GIF 做调整的过程中会有很多的坑,比如经常容易出现色差严重、分辨率不合适、GIF 占用的存储过大等问题。有时我们也希望在转换前做一些剪切等。处理图片的工具其实有很多,比如 ImageMagick 的 convert 工具,或者 gifsicle 工具,甚至是一些在线的 GIF 格式转换工具(极不推荐,很难用)。但是在处理类视频的信息时,这些工具其实并不很适合。毕竟原始数据本身是视频,相比先把视频转换成 GIF 再做操作,直接在视频上做完操作最后再一步转为 GIF 造成的信息丢失会更少,效果也会更好。本文主要基于 FFmpeg 总结一下转换过程中经常用到的命令,并介绍个人在处理这些问题的一些原则。
在典型的场景下,我们在将视频转为图片前一般会有如下步骤:
下面将基于此流程,结合样例做简要介绍。本地的 ffmpeg 版本为 4.4.1 。
如果我们能获取到视频文件,则最好。不过很多情况下还是需要我们使用一些录屏工具进行采集,不过作为系统洁癖患者,个人不建议下载一些乱七八糟来源的录频工具或者很贵但是普通人根本用不到多少功能的视频处理软件。
以上工具足够用了。
无论是自有视频,还是录屏来的视频,我们经常都希望剪裁掉头尾的一些无用片段。我们当然可以使用常见的编辑工具,例如 Mac 上的 imovie 等。不过显然我们不想杀鸡用牛刀,一两条命令就可以解决。
截取从 00:00:10 开始的 10 秒的时间段的视频:
$ ffmpeg -i sample.mov -ss 00:00:10 -t 00:00:10 output1.mov
(其中 -ss 表示开始时间,-t 表示截取的时长)
截取从 00:00:10 到 00:00:20 时间段的视频:
$ ffmpeg -i sample.mov -ss 00:00:10 -to 00:00:20 output2.mov
(其中 -ss 表示开始时间,-to 表示结束时间)
确认二者相同并确认视频时长:
$ diff output1.mov output2.mov
$ ffprobe -v error -show_entries format=duration sample.mov
[FORMAT]
duration=10.000000
[/FORMAT]
(其中 -v error 是为了屏蔽一开始打印的版本信息)
由于我们需要展示的视频本身是嵌入文档或网页里的,因此本身对图片分辨率的要求并不大。这时候适当的缩小分辨率无论是对文件占用的大小、还是对展示的便捷都是有好处的。采用的工具是 ffmpeg 的 scale filter graph。
确认原视频的分辨率:
$ ffprobe -v error -show_entries stream=width,height sample.mov
[STREAM]
width=1560
height=1148
[/STREAM]
强制比例缩放,设置长度,宽度:
$ ffmpeg -i sample.mov -vf scale=720:530 output1.mov
(其中 720 为宽,530为高,且,宽高均不可为奇数)
固定比例缩放,设置宽度,高度自适应:
$ ffmpeg -i sample.mov -vf scale=720:-1 output2.mov
固定比例缩放,设置高度,宽度自适应:
$ ffmpeg -i sample.mov -vf scale=-1:530 output3.mov
(将需要自适应的部分设置为-1即可,如果自适应部分再按倍缩放,则可以设置为 -2 ,-3 等)
选择自定义scale算法,可选算法可见ScalerOptions:
$ ffmpeg -i sample.mov -vf scale=-1:530:flags=lanczos output4.mov
(缩放算法有很多种,如果效果不好可以换几个试试。默认是 bicubic 算法)
视频的帧率一般会比较高,而我们对 GIF 的要求一般没那么高。为了减少图片的体积,我们可以手动调节下帧率,以达到图片大小和用户体验的最佳平衡点。通常视频的帧率一般是 60 fps 。对普通图片来说,20 的fps早已够用,节约点的话,10 fps ,5 fps 也凑合能看,具体就自己体验喽。
确认原视频帧率:
$ ffprobe -v error -show_entries stream=r_frame_rate sample.mov
[STREAM]
r_frame_rate=60/1
[/STREAM]
(原视频的帧率就是 60 fps)
调整帧率为20:
$ ffmpeg -i sample.mov -r 20 output1.mov
对于录屏而言,可能我们的动作比较慢,希望在展示的时候稍微加快点速度以提高展示效率并减少视频体积。或者视频本身很快,我们希望做一下慢放。这些时候我们最好提前就对视频速度做一些调整。
调整视频速度变快为5倍(时长*0.2):
$ ffmpeg -i sample.mov -filter:v "setpts=0.2*PTS" output1.mov
调整视频速度变慢2倍(时长x2):
$ ffmpeg -i sample.mov -filter:v "setpts=2*PTS" output2.mov
(原理通过调整视频帧中的 PTS 展示时间戳来调整速度)
需要注意的是,调整速率后,帧率仍然保持不变。因此将视频加速再减速成原视频的速度后,与原视频相比会丢失信息。
其实H264视频本身的压缩率已经很高了,如果想要进一步压缩,基本只能通过一些有损的形式。我们可以通过调整 x264, x265, 以及 libvpx 中的 Constant Rate Factor 参数来进行一些有损压缩处理。该参数取值在 0 到 51 之间,值越大则有损的比例越大,压缩率越好。通常我们会取 23这个值,稍微激进一点可以调整为30+。
调整 crf 取值到30 :
$ ffmpeg -i sample.mov -crf 30 output1.mov
比较二者大小:
$ ls -lah sample.mov output1.mov
-rw-r--r-- 1 myths staff 1.5M May 1 17:31 sample.mov
-rw-r--r--@ 1 myths staff 1.0M May 1 17:51 output1.mov
可见视频的确压缩了一些,不过会发现 GIF 的质量会有一些下降。是否需要调整这个参数,需要根据实际情况进行取舍。
ffmpeg默认支持根据输出文件的后缀名自动进行格式转换,非常方便。但是如果你以为能无脑用,那就大错特错了。
一个典型的错误转换方法是:
$ ffmpeg -i sample.mov output.gif
有什么问题呢?我们检查一下视频长度就知道了:
$ ffprobe -v error -show_entries format=duration sample.mov
[FORMAT]
duration=62.000000
[/FORMAT]
$ ffprobe -v error -show_entries format=duration output.gif
[FORMAT]
duration=173.680000
[/FORMAT]
我们发现转换后的 GIF 的视频长度竟然和原视频不一样。打开检测后发现的确 GIF 相比原视频要慢了许多。
再检查一下帧率就发现问题了:
$ ffprobe -v error -show_entries stream=r_frame_rate,avg_frame_rate sample.mov
[STREAM]
r_frame_rate=60/1
avg_frame_rate=60/1
[/STREAM]
$ ffprobe -v error -show_entries stream=r_frame_rate,avg_frame_rate output.gif
[STREAM]
r_frame_rate=50/1
avg_frame_rate=257/12
[/STREAM]
GIF 的实际帧率竟然变小了,难怪视频变长了。计算下比例也能对的上:
173.680000/62.000000≈(60/1)/(257/12)
既然如此,我们强制设置下帧率就好了:
$ ffmpeg -i sample.mov -r 20 output2.gif
$ ffprobe -v error -show_entries stream=r_frame_rate,avg_frame_rate,duration output2.gif
[STREAM]
r_frame_rate=20/1
avg_frame_rate=20/1
duration=62.050000
[/STREAM]
这样时长就和原视频对上了,帧率也是我们设置的帧率。具体原因未知,不过结论就是在对视频转 GIF 时,一定要重新指定一下帧率。
你可能知道,和视频不同,PNG的调色盘只有256种颜色。默认情况下,这256种颜色会尽量平均分布在整个颜色空间中。这就导致对于一些色彩区分度比较小的图片,会出现颜色模糊的情况。
首先我们生成一张下未优化下的图片:
$ ffmpeg -i sample.mov -r 20 output-raw.gif
结果如下:
这时候需要用对图片进行一下全局调色板优化:
$ ffmpeg -i sample.mov -r 20 -vf "split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" output-palette.gif
结果如下:
放大后仔细观察一下二者,你会很明显的发现原图的背景颜色变成了很多小颗粒,而使用调色版优化后,背景才真正显示了纯色。
当然,如果对图片质量要求高,也可以对每一帧单独记录调色板(代价就是图片会变大很多):
$ ffmpeg -i sample.mov -r 20 -vf "split[s0][s1];[s0]palettegen=stats_mode=single [p];[s1][p]paletteuse=new=1" output-palette-single.gif
如果图片的运动程度比较大,也可以修改一些防抖参数( dither = none / bayer / heckbert / floyd_steinberg / sierra2 / sierra2_4a),如果不指定,默认是 sierra2_4a 。例如:
$ ffmpeg -i sample.mov -r 20 -vf "split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse=dither=none" output-palette-none.gif
$ ffmpeg -i sample.mov -r 20 -vf "split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse=dither=bayer" output-palette-bayer.gif
$ ffmpeg -i sample.mov -r 20 -vf "split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse=dither=heckbert" output-palette-heckbert.gif
最后看一下添加了调色板优化后的图片大小:
$ ls -lah
-rw-r--r-- 1 myths staff 2.2M May 2 11:36 output-palette-bayer.gif
-rw-r--r-- 1 myths staff 2.5M May 2 11:36 output-palette-heckbert.gif
-rw-r--r-- 1 myths staff 1.9M May 2 11:40 output-palette-none.gif
-rw-r--r-- 1 myths staff 32M May 2 11:29 output-palette-single.gif
-rw-r--r--@ 1 myths staff 2.7M May 2 11:15 output-palette.gif
-rw-r--r-- 1 myths staff 1.0M May 2 11:30 output-raw.gif
-rw-r--r--@ 1 myths staff 198K May 1 22:15 sample.mov
显然,每帧记录调色板( output-palette-single.gif ) 最大;不进行调色板优化图片最小,但是质量最差( output-raw.gif );而不使用防抖策略( output-palette-none.gif ) 会使图片更小一点,也不太影响图片观感。
通过 ffmpeg 还可以设置图片的循环次数。图片在播放完成后,默认会重头开始播放,如果想修改这个特性,可以通过 -loop 参数指定循环方式,也可以通过 -final_delay 参数配置间隔时间:
设置 GIF 播放完后不重头开始:
$ ffmpeg -i sample.mov -r 20 -loop -1 output.gif
gif muxer 支持的 -loop 和 -final_delay 参数的说明可以通过命令查看:
$ ffmpeg -v error -h muxer=gif
Muxer gif [CompuServe Graphics Interchange Format (GIF)]:
Common extensions: gif.
Mime type: image/gif.
Default video codec: gif.
GIF muxer AVOptions:
-loop <int> E.......... Number of times to loop the output: -1 - no loop, 0 - infinite loop (from -1 to 65535) (default 0)
-final_delay <int> E.......... Force delay (in centiseconds) after the last frame (from -1 to 65535) (default -1)
有点令人费解的是,除了无限重复(0)和不重复(-1)的值,如果你想重复 N 次,那么这个 -loop 参数就要设置为 N+1 。。。
最后记录一下我的一个测试资源在顺序进行以上各种处理后的大小变化情况:
GIF 格式的压缩效果和普通视频格式相比还是差很多的,不过在尽量保证图片质量的前提下,把图片大小控制在 2M 以内一般也还能够接受。
Speeding up/slowing down video
How do I convert a video to GIF using ffmpeg, with reasonable quality?