分享 GIF 图片转视频

xiaohuxu · 发布于 2015年12月30日 · 最后由 xiaohuxu 回复于 2016年1月04日 · 1143 次阅读
3679

缘由

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

结束

共收到 10 条回复
1802

蛮好的

8042

趟坑先锋 👍

2286

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

136

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

3679

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

3679

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

24361

挺好的。

20722

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

9162

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

3679

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

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