webp动图循环n+1的问题
Tag webp,循环, on by view 583

最近需要用ffmpeg将视频截取转为webp动图,但是发现截取后的视频在Chrome浏览器上打开播放循环次数不对

./ffmpeg -i xxx.mp4 -map_metadata -1 -s 640x360 -r 15 -t 00:00:02 -loop 1 xxx1.webp

以上命令中 -loop 1 指定动画循环1次,但是所生成的图片在Chrome上播放却是循环2次,同时发现截取 gif 也存在这个问题

./ffmpeg -i xxx.mp4 -map_metadata -1 -s 640x360 -r 15 -t 00:00:02 -loop 1 xxx1.gif

但是后来我发现将 -loop 指定为-1却可以截取一次循环的gif,但是 -loop -1 这个参数如果用在截取 webp 就会报错。

最后我找到了 libwebp 项目,在其压缩包目录中找到了官方的 webp 查看工具 vwebp.exe ,用它播放 webp 发现却是正常的,Chrome上播放循环两次的图用它播放只有一次。这说明是 Chrome 的bug,并非 ffmpeg 转码的问题。有人也发现了这个问题。 链接  



使用fontello和Abobe Illustrator制作自己的web字体
Tag fontello,Illustrator,web,字体, on by view 3729

自定义web字体流行已经不是一天两天的事了,仿佛是随着google,ajax,web2.0这些字眼在多年前就已经到来了,不过如今却是越加流行了。用自定义字体代替图片图标确实有着不少好处,比如,字体是矢量的可以无限放大,字体可以随意的改变颜色只需在css中设置color属性即可。最近发现了一个在线字体生成工具很是不错,那就是fontello

fontello提供众多图标供用户定制选择,并且用户还可以上传自己设计的svg图标文件,fontello会将其转化打包为字体文件fontello.eot、fontello.svg、fontello.ttf以及fontello.woff,供不同的浏览器调用,它在浏览器中的调用方式和众多的图标字体的调用方式是一样的——通过css调用,或者说通过指定class值的html节点调用,相信所有人都会使用,如果不会,自己查看打包目录下的demo.html文件就会了。

字体设计:

首先打开Illustrator,通过性状工具以及钢笔工具勾勒出你所需要的图形,然后转化为复合路径(对象>复合路径>建立),然后保存为svg配置文件SVG 1.1,即可生成svg文件。

illustrator_demo.png

然后,在fontello页面的custom区域拖拽上传svg文件便会生成自定义的字体文字(或者说是图标),选中它,以及你所需要的图标,点击download便可以打包字体文件。

fontello.png

使用字体图标的好处就不在赘述了。在Illustrator中设计图标时无需在意图标的颜色,因为对于字体来说是没有颜色的,只有形状,这也是在Illustrator中将其转换为复合路径的原因。另外需要注意的是在Illustrator中绘制路径的话要保证路径是闭合的,不然无法形成形状,在导入fontello后便会发现图标是空白的,假如你发现自己的图标是空白的或者是全黑的,那么建议你先学习一下Illustrator的使用以及路径和性状这些概念再来设计图标。