分享 GIF 图片转视频

xiaohuxu · 2015年12月30日 · 最后由 xiaohuxu 回复于 2016年01月04日 · 3319 次阅读

缘由

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

结束

趟坑先锋 👍

MP4 的头文件过大,能不能转 flv

不能自动播放 这个问题我记得 twitter 现在也是用视频替换了 GIF, 可以去翻翻他们怎么解决的

#3 楼 @abulo 可以转,但是不知道兼容性怎么样

#4 楼 @southwolf 3q,现在 APP 是可以的,WAP 还没有找到解决方案

挺好的。

可以转成 JPG sprite , 用 js 控制播放,iOS 上也可以自动播放。 Github 上有实现的类库:http://gka.github.io/canvid/

这个思路挺好的……不能自动播放暂时用 UA 判断一下来源选择 gif 或者 mov 也是可以的……不过什么场景下会有那么多 gif?尤其是在大量 gif 的位深都很低的情况下……

#8 楼 @seqs 用画布是一个思路,但是这个类库感觉要的参数太多,太复杂了。你这样实现了吗?

需要 登录 后方可回复, 如果你还没有账号请 注册新账号