前端实现序列帧_炫酷H5中序列图片视频化播放的高性能实现

作者：张鑫旭

1、爆款H5中的炫酷场景的技术实现

每年都会迸出一些爆款H5，这些H5通常会有一些酷酷的场景变换。

例如网易Julia H5。创意很棒，传播效果很广，其技术实现就相当简单粗暴，直接一个3分多钟的不带停顿的视频：

类似使用视频的爆款H5还有很多，确实是一个非常不错的解决方案。

但是，视频的实现也有局限：iOS下不能自动播放，需要至少touch一次屏幕，这个有时候还挺烦人的，例如我们想做一个H5 app闪屏的时候就蛋疼了。

不能在中间穿插棒棒的交互效果，例如，需要视频某一帧暂停，鼠标hover或者touch的时候，当前画面有交互效果，就很不好处理。

播放的速率不能随心所欲控制，视频完成也就定死了。

如果有些信息是动态的，需要与用户信息关联，则视频方案也会面临很大的调整，因为总不可能每一个用户生成一个不一样的视频，需要辅助额外手段满足需求(例如CSS覆盖定位)。

此时又当如何处理呢？

我们可以使用序列图片，通过JS脚本，来模拟视频播放效果，以上所有局限将通通可以规避。

2、序列图片视频化技术实现方法很多

序列图片视频化技术实现方法很多，例如：合在一张大图上，使用CSS3 animation控制background-position实现播放效果。此方法优点是方便快捷，但是，background-position定位性能不怎么样，只适用于小元素小动画，例如一些loading效果，如果是全屏的大图切换，