GIF动图统治网上娱乐世界已经很长一段时间了，作为一种“古老”的文件格式，GIFs与1989年首度与公众见面。而Twitter和Facebook却在两年前放弃了GIF格式，imgur.com也已经准备全面放弃GIF格式。 为什么GIF会遭到这些网络巨头的抛弃 ？答案： MP4

下面来做个简单的实验： GIF图片（cnode只允许上传1M图片，不足以演示这个例子，所以贴个地址） MP4地址 上面两个地址内容完全一样，只是不同的格式。来看下这两种格式在网络上的表现吧 GIF： MP4:

GIF的大小：8MB，加载时间：31s MP4的大小：630KB，加载时间：173ms

相比GIF，MP4的体积减小了12倍左右，加载时间更是减少到了不到1秒

MP4有什么优势？

1. 体积： GIF动图的压缩算法很成问题。原始的GIF体积超过500kb，而转换成mp4后，体积只有100kb。一个GIF动图实际上就是一组连续的图片装到一个图片里。而mp4视频可以利用各种强大的压缩技术，例如keyframe和预测帧技术。 如果你是经常使用手机上网的用户，那你是最大受益者。即使是桌面用户，当一个页面是有太多的GIF动图时，你也会从这种MP4转换措施中感受到明显的性能上的提升。
2. 播放控制： 让GIF动图暂停播放是绝对不肯能的。当然。有些技术可以从播放的动图中提取一些静态帧，但这不是浏览器的原生功能。视频播放完全可以受浏览器的控制。也就是说，你可以暂停播放、跳跃播放、定位时间，还可以慢速播放等很酷的效果。你的GIF动图特别有趣吗？从想重放一遍慢动作？

NODE如何将GIF转成MP4？ 来看一个简单的小例子：

环境准备： node转成MP4还是用到了ffmpeg（http://ffmpeg.org/）， 需要下载对应平台的ffmpeg文件并且配置好环境变量。（http://trac.ffmpeg.org/wiki/CompilationGuide/Centos 这个地址是centos下安装ffmpge的教程）

安装node-fluent-ffmpeg 这里用到了fluent-ffmpeg来调用ffmpge $ npm install fluent-ffmpeg

一个简单的例子 下面写一个简单的例子，文档很全面，大家有空可以仔细阅读。

var ffmpeg = require('fluent-ffmpeg');

ffmpeg('\tmp\video.gif')
  .videoCodec('libx264')
  .size('400x310')
  .outputOptions(['-pix_fmt yuv420p'])
  .on('error', function(err) {
    console.log('An error occurred: ' + err.message);
  })
  .on('end', function() {
    console.log('Processing finished !');
  })
  .save('\tmp\video.mp4');

下图是转换后的结果：

参考：

1. http://ffmpeg.org/
2. http://www.webhek.com/gif-video
3. http://www.cnbeta.com/articles/303023.htm
4. http://trac.ffmpeg.org/wiki/CompilationGuide/Centos

最后打个广告： 我的小网站：得瑟网（http://deee.se）上线了，是一个搞笑图片分享社区网站，可以打发无聊时间看好玩图片。其中用到了将gif转成MP4技术。 随后我会把得瑟网用到的相关技术整理成文章发布，也希望大家能喜欢

2016-01-11 补充： MP4还有一个比较明显的缺点，在IPhone和IPad下回自动全屏播放，折中的解决方案： 在view标签中使用webkit-playsinline属性控制不全屏播放，并且在OC代码中设置webview.allowsInlineMediaPlayback = YES;

<video id="player" src="widget://res/video.mp4" loop autoplay webkit-playsinline></video>

(此方法仅限于app内置的webview，对于大多数ios浏览器是没用的。微信的页面设置了webview.allowsInlineMediaPlayback = YES，可以在微信中打开页面测试)

还有一个解决方案：https://github.com/newshorts/InlineVideo 主要是用canvas来处理，单测试了一把非常烧机器，cpu会飙升，所以不推荐