缘由

网站的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

结束