美文网首页Android进阶Android开发自定义views
FFmpeg 视频转高质量 gif 图输出方案对比

FFmpeg 视频转高质量 gif 图输出方案对比

作者: 石先 | 来源:发表于2017-07-10 15:08 被阅读2868次

    不好意思,这里先安利下自己最近上架的应用,因为这个 App 使用了本篇文章中提到的技术方案进行了实现,实际效果欢迎大家直接去 Google Play 或国内酷安市场下载安装试试,欢迎拍砖。
    VEditor - Google Play
    VEditor - 酷安

    使用 ffmpeg 视频文件转 gif 输出时,需要压缩 gif 输出,参考文章使用 ffmpeg 实现 MP4 与 GIF 的互转 可以进行基本的处理。但是看到使用 FFmpeg 处理高质量 GIF 图片 这篇文章中阐述了一些提升方案。按照文章中说的方案进行了处理,下面是对比使用普通方案的效果。

    原理介绍的英文原文:High quality GIF with FFmpeg

    原理(参考原文中的描述)

    GIF 是受限于256色调色板。并且默认情况下,FFmpeg 只使用一个通用调色版去尝试覆盖所有的颜色区域,以此来支持含有大量内容的文件。

    普通转换为GIF的效果图

    提高 GIF 图片质量的第一步就是定义一个更好的调色板。GIF格式存储了一个全局调色板,但你可以对一张图片重新定义一个调色板。

    每一帧的调色板都可以取代全局调色板来只对一帧起作用。一旦你停止定义一个调色板,它将会回落到全局调色板。

    因此先考虑为gif生成一个新的调色板,第一次遍运行是对整个图片计算一个调色板,这就是新的 palettegen 滤波器参与进来的地方。
    这个滤波器对每一帧的所有颜色制作一个直方图,并且基于这些生成一个调色板。这个滤波器是在做色彩量化,并且生成一个调色板(通常保存在一个PNG文件里)

    生成全局调色板

    提升gif质量的第二步是解决颜色映射与抖动。
    生成全局调色板后,第二步就是将颜色效果映射到颜色输出流中,这个是通过 paletteuse 滤波器完成的。它将会使用这个调色板来生成最终的量化颜色流,它的任务是在生成的调色板中找出最合适的颜色来表示输入的颜色。
    这个滤波器也是你可以选择使用哪种抖动方法的地方,抖动可以让图片更加清晰。使用这两个滤波器效果后可以让你将 GIF 编码成单全局调色板、抖动的。

    关于抖动,是指把图像从较高色彩深度(即可用的颜色数)向较低色彩深度的区域绘制时,在图像中有意地插入噪点,通过有规律地扰乱图像来让图像对于肉眼更加真实的做法。对于图像降低色彩深度绘制时,可以避免出现大片的色带与色块,借以提升实际观感效果。

    进行高质量输出优化后的效果

    实际测试环境

    平台: Nexus 5X
    操作系统: Android 7.1.1
    视频原文件: demo.mp4
    FFmpeg库: 自编译支持 Android 平台的 ffmpeg 的 so 包

    普通方案下的处理

    1.执行命令

    普通方案生成 gif
    @param startTime 开始时间 秒/s
    @param duration  间隔时间 秒/s(用来截取视频)
    @param videoPath 源视频路径
    @param outFilePath Gif输出路径
    String command = "ffmpeg -ss " + startTime + " -t " + duration + " -i " + videoPath + " -r 15 -vf fps=15,scale=270:-1 " + outFilePath;
    

    2.输出效果图

    demo_mp4_1499666734.gif

    3.实际运行 Log 日志

    普通视频转GIF方案执行耗时 5349 ms
    输出文件大小:2,649,453 字节
    尺寸:480 × 270
    07-10 14:10:45.360 5355-5355/gdut.bsx.videoreverser D/VideoReverser: cmdGif videoPath:/storage/emulated/0/demo.mp4
    07-10 14:10:45.361 5355-5355/gdut.bsx.videoreverser D/VideoReverser: cmdGif outFilePath:/storage/emulated/0/VideoReverser/demo_mp4_1499667045.gif
    07-10 14:10:45.361 5355-5355/gdut.bsx.videoreverser D/VideoReverser: cmdGif startTime:2 duration: 11
    07-10 14:10:45.369 5355-5355/gdut.bsx.videoreverser D/VideoReverser: cmdGif Command:ffmpeg -ss 2 -t 11 -i /storage/emulated/0/demo.mp4 -s 480*270 -b 568k -r 10 -pix_fmt rgb24 -f gif /storage/emulated/0/VideoReverser/demo_mp4_1499667045.gif
    07-10 14:10:45.371 5355-5355/gdut.bsx.videoreverser D/VideoReverser: cmdGif Command onBegin
    07-10 14:10:47.208 5355-5355/gdut.bsx.videoreverser D/VideoReverser: onCompletion
    07-10 14:10:50.709 5355-5355/gdut.bsx.videoreverser D/VideoReverser: cmdGif Command onEnd0
    07-10 14:10:50.709 5355-5355/gdut.bsx.videoreverser D/VideoReverser: cmdGif 耗时:5349
    

    GIF高质量优化方案

    1.创建全局调色板

    生成全局调色板命令:
    @param startTime 开始时间 秒/s
    @param duration  间隔时间 秒/s(用来截取视频)
    @param videoPath 源视频路径
    @param globalPalettePicPath 输出的全局调色板的路径
    String command = "ffmpeg -ss " + startTime + " -t " + duration + " -i " + videoPath + " -b 568k -r 20 -vf fps=20,scale=320:-1:flags=lanczos,palettegen -y " + globalPalettePicPath;
    

    输出的全局调色板图片:

    全局调色板图片.png

    2.输出优化后的 gif

    利用调色板图片和视频源文件同时处理生成 gif 命令:
    @param startTime 开始时间 秒/s
    @param duration  间隔时间 秒/s(用来截取视频)
    @param videoPath 源视频路径
    @param globalPalettePicPath 全局调色板的路径
    @param outFilePath Gif输出路径
    String command = "ffmpeg -v warning -ss " + startTime + " -t " + duration + " -i " + videoPath + " -i " + globalPalettePicPath + " -r 15 -lavfi fps=15,scale=270:-1:flags=lanczos[x];[x][1:v]paletteuse -y " + outFilePath;
    

    输出最终 gif 图片:

    demo_mp4_1499666734.gif

    3.实际日志输出

    执行耗时: 16931 ms
    输出文件大小:2,951,864 字节
    尺寸:320 × 180
    07-10 14:05:34.327 2557-2557/gdut.bsx.videoreverser D/VideoReverser: cmdGif videoPath:/storage/emulated/0/demo.mp4
    07-10 14:05:34.328 2557-2557/gdut.bsx.videoreverser D/VideoReverser: cmdGif outFilePath:/storage/emulated/0/VideoReverser/demo_mp4_1499666734.gif
    07-10 14:05:34.328 2557-2557/gdut.bsx.videoreverser D/VideoReverser: cmdGif startTime:2 duration: 11
    07-10 14:05:34.328 2557-2557/gdut.bsx.videoreverser D/VideoReverser: cmdGif Command:ffmpeg -v warning -ss 2 -t 11 -i /storage/emulated/0/demo.mp4 -r 10 -vf fps=10,scale=320:-1:flags=lanczos,palettegen -y /storage/emulated/0/VideoReverser/demo_mp4_1499666734.png
    07-10 14:05:34.332 2557-2557/gdut.bsx.videoreverser D/VideoReverser: cmdGif Command onBegin
    07-10 14:05:42.973 2557-2557/gdut.bsx.videoreverser D/VideoReverser: cmdGif Command:ffmpeg -v warning -ss 2 -t 11 -i /storage/emulated/0/demo.mp4 -i /storage/emulated/0/VideoReverser/demo_mp4_1499666734.png -r 10 -lavfi fps=10,scale=320:-1:flags=lanczos[x];[x][1:v]paletteuse -y /storage/emulated/0/VideoReverser/demo_mp4_1499666734.gif
    07-10 14:05:51.258 2557-2557/gdut.bsx.videoreverser D/VideoReverser: cmdGif Command onEnd0
    07-10 14:05:51.258 2557-2557/gdut.bsx.videoreverser D/VideoReverser: cmdGif 耗时:16931
    

    总结

    对于 gif 的处理要考虑好媒体文件的相关特性,不论是从分辨率、帧率或采样率等都需要仔细考虑产品的需求依赖。要对文件图像质量和文件大小等方面综合考虑,以实际观感出发,确定文件合适的操作依据。

    再安利一波

    最近自己开发的这个 App 按照了本篇文章中提到的技术方案进行了实现,实际效果大家直接去 Google Play 或国内酷安市场下载安装试试,欢迎拍砖。
    VEditor - 酷安
    VEditor - Google Play

    相关文章

      网友评论

      • 77a823a8af72:楼主你好,为什么我生成全局调色板的时候一直是失败的?
        石先:执行命令出错的话,考虑下是不是编译的 FFmpeg 库存在问题
      • secondHT:lavfi 这个命令什么意思?百度竟然搜不到
        石先:Google了解下,官方文档介绍:https://www.ffmpeg.org/ffmpeg-devices.html#lavfi
      • 逸云天:你好,每次都要生成全局调色板吗?如果不知道原gif或者原视频的时候,比如将一堆png图片合成gif图片。怎么得到全局调色板呢?
        石先:@逸云天 用局部调色板方式可以允许每帧包含该帧独立的 256 种颜色,对于某些帧与帧之间反差较大的gif 图像可以产生较好的输出结果,但要注意频繁的改变调色板也有可能导致图像闪动。如果只是考虑控制 gif 体积情况下造成的清晰度不够,可以考虑直接对图片进行无损压缩。
        逸云天:@石先 你好。每张图片对应一张调色板。合成gif的时候输入n张png图片+n张调色板?
        石先:@逸云天 视频使用全局调色板主要是因为帧率控制和压缩效果,多图片合成的话可以考虑使用局部调色板,也就是每一张图片对应一张调色板。
      • 生椰拿铁锤:博主在Android中的实现主要是用命令行的方式调用ffmpeg么?app设计很不错,不知道博主是否有源码提供?
      • 麦哲文:好像在别处看过
        麦哲文:抱歉
        石先: @skinner 开头已经说过了,思路来自于国外这边原文http://blog.pkh.me/p/21-high-quality-gif-with-ffmpeg.html#content

      本文标题:FFmpeg 视频转高质量 gif 图输出方案对比

      本文链接:https://www.haomeiwen.com/subject/hrgyhxtx.html