GIF尚能饭否？

Sakura的文章页有个非常大的区域显示文章封面。我一直特别喜欢这个设计。大区域可以填满宽屏屏幕，使整个页面更加地充实。而这么大的区域要是填充进会动的内容，效果一定是好上加好。而要在这里放动态的内容，我们一般的解决方案就是将GIF设置成封面图片来让封面动起来，比如我们这篇文章。

GIF的一个优势是制作简单。毕竟是个历史悠久的制式了，不仅不用担心能不能播出来（笑死Caniuse上甚至没有GIF的兼容数据），制作工具也非常好找。卷王可可这个GIF是把所有视频帧导出后，使用ImageOptim/gifski制作的。如果使用ffmpeg来导出视频帧，那么整个过程可以在一行命令中搞定。gifski这个制作工具的编程语言甚至比GIF小个十几二十岁。

然而，GIF虽然是最为人们所知的动图格式，GIF这一格式本身却已经过为老旧。它只能处理256种颜色，而这会造成色彩失真。另外，它所使用的压缩算法LZW并不是适合图像压缩的算法，已经落后于现代的视频压缩算法。换句话说，同等质量与长度的视频，可能会比GIF要小的多。

还是拿卷王可可举例：我们现在用的GIF版本，画面尺寸是384 × 216，实际传输的文件大小是1.8M（CDN会自动转码成webp），文件原大小是6.4M。而同样长度的，画面尺寸是1920X1080的HEVC格式视频文件大小仅有2.2M（含音轨）。不过由于目前只有Safari原生支持HEVC（Safari在媒体相关的功能上怎么这么积极），我们放一段它的小弟H.264压缩的版本（大小3.4M，含AAC格式音轨）和GIF版的对比：

GIF
H.264

此外，在Safari的移动版本上，GIF的播放会有些问题，感觉是播放帧率的设置不太一样（ 所以说苹果真是推动新技术普及的领头羊...

非静止画面，硬生生变成了闪电先生

继承自Sakura的文章封面视频解决方案

上一节我们提到，从现在的视角来看，GIF方案存在着许多不足。使用视频来播放动态内容是当下的最佳实践。mashirozx在Sakura中制作了文章封面视频这一功能，demo页的效果是真的不错。于是我特意在在Sakurairo中重整了相关的功能。mashirozx的方案是在文章中添加自定义字段，相关字段在Sakurairo中也是继续沿用。额外加入的是控制是否在文章列表显示视频封面的字段use_as_thumb。只有设置为true或者only时会在文章列表显示视频，设置为only时不会在文章页显示视频。这一设计是帮助已在使用文章视频封面的用户无缝升级，这一理念一直贯穿在Sakurairo的新功能设计之中。（毕竟她真的是个特别有历史的主题了）

然而，将视频搬到文章列表后，我们就不得不面对两个问题。

空屏时间

空屏时间是前端优化要考虑的重要指标。mashirozx担心视频文件过大时会导致空屏，建议使用HLS(HTTP Live Streaming, HTTP实时串流)将视频切片提供。然而在本地环境测试时我发现，如果双方都支持HTTP/1.1协议，视频会自动分片传输至客户端，并且作为文章封面的视频不可能会有太长的时长，因此HLS其实显得没有那么的必要。此外，我给<video>元素设置了poster属性，能起到类似于懒加载图片中使用的占位符的作用。

懒加载

懒加载十分重要。我们其实不想在用户还没把视频滑入viewport时就已经把它下好了，因为他们不是“必须要加载的资源”。于是我改写了主题使用的Lazyload库，设法使它支持<video>。不过现行解决方案也不能说是“最好的”，只是为了尽量充分利用现有的代码。同样的问题也出现在加载HLS视频流上，所以现在HLS视频暂时不支持懒加载。

那么，什么时候可以用到呢？

这一功能已通过昨天的一连串commits推送到了preview分支上。如果你愿意尝鲜，可以自行下载preview分支进行尝试，我们期待你的反馈。对于一般用户，可以等待正式包推出后再进行尝试。