精华 一张图告诉你不要再用GIF了
发布于 2 年前 作者 dim422 10925 次浏览 来自 分享

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


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

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');

下图是转换后的结果:

QQ截图20160108153926.png

参考:

  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会飙升,所以不推荐

20 回复

apng大势所趋…

好像很有用。 网站也看了,个人感觉里面MP4做成自动播放好点,不然用户每次都得手动点一下。

@imhered 嗯,做成自动播放体验要好得多。 改进一下,多谢

@zhfish apng好像有浏览器不支持的问题? 不是很了解

不错不错

来自酷炫的 CNodeMD

在做MP4的时候,遇到了一个比较简单的问题,不知道怎么解决,那就是透明问题。虽然gif也不能做到完全透明,但是至少可以接近透明。可是MP4能做成背景透明吗?还是我们用的工具不对?

@echoloyuk 我的理解是MP4做播放工具,而GIF对一个网站还是必不可少的装饰性工具。我想需要用到透明的应该都是网站装饰的地方,这里个人觉得还是可以用GIF。而MP4则作为播放工具是一个利器。两者可以配合使用

@dim422 嗯,同意,不过用mp4肯定是希望能替换掉gif了,最理想的就是能用Css3搞定一些基本的装饰动画 自豪地采用 CNodeJS ionic

但是 不是每个网站都支持 mp4播放吧

不错不错

@520janking 网站只要想支持随时可以支持,主要是浏览器吧。有的浏览器不支持

@dim422 嗯 是的!不好意思 我没表述清楚

@520janking 用MP4还有一个问题,在ios浏览器中会自动全屏,这点体验就不是很好

我想问的是 -。 -

说好的一张图呢 0. 0

没用过MP4啊

@xadillax 标题党,哈哈哈哈哈

我看到了蜀,

谢谢分享 但是您的嘚瑟网已经打不开了…

我打开了,看见了些少儿不宜的

回到顶部