缘由

网站的 GIF 图片比较的多，但是 GIF 图片，大小比较大，特别是在 WAP 上,非常吃流量。为了和运营商做斗争，研究了一下。对于我这种不是图片相关的人来说，遇到很多的坑，和大家说道说道。

技术

• ffmpeg + imagemagic
• html5 video
• js
• ruby(或者 go)

GIF 转化

• 使用的主要是 ffmpeg 的命令 ruby ffmpeg -i input.gif -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4

视频播放

• 使用 js 的 scroll 事件，在滚动区域内播放。由于 mp4 在播放的时候才下载资源，可以有效的减少网站资源的下载。

传说中的坑

• 在 ios 中，浏览器播放视频会默认全屏，无法修改这个默认动作。
• 由于版权的原因，firefox 对 h264 (libx264) 的支持不够友好，简单的使用转化命令，firefox 无法成功播放。 ruby ffmpeg -i input.gif output.mp4
• 顺带说一下，imagemagic 的 crop 命令，在裁减 GIF 图片的时候必须加上 +repage 参数，不然 GIF 大小不会改变。

结果

GIF 图片的图片大小一般要减少一半以上，可以在网站上播放。缺点就是在 ios(浏览器上) 无法自动播放，必须手动播放

参考

ffmpeg+H.264

结束