缘由
网站的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(浏览器上)无法自动播放,必须手动播放