谈谈常见H5制作方法——视频与CSS3

摘要：但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。

本文在H5动效的常见制作手法的基础上，对相印的H5动效制作手法进行了扩展和整理，并结合案例谈谈怎么将其做得生动。

视频类h5可以带给用户动效逼真，流畅的体验。虽然说制作视频的难度较大，但是瑕不掩瑜，一支视频可以尽可能地创造出天马行空的想法，一些短时间内无法通过代码创造出的酷炫效果。
首先放上两个案例供大家体验。

1） 金馆长直播间

实现还是比较简单的，交互就是通过用户点击无缝切换不同的视频，基本每个能按到的tab都可以对应一支视频，让用户很有参与感

2） QQ钱包二周年

其中三支视频的交互在于可以由用户拖动滑块，通过设置currentTime实时控制视频进度，拖动到末端时触发视频播放事件。我觉得也是很有趣的。

想在H5中灵活运用视频，必须对video相关的属性、Api有个大致的了解，这里首先对最基本的进行普及一下。

1） 标签属性

src ：视频地址

width height ：视频宽高(px) h5中可指定为当前设备屏幕宽高

poster：视频封面，没有播放时显示的图片

preload：预加载

autoplay：自动播放

loop：循环播放

controls：浏览器自带的控制条

webkit-playsinline="true" | playsinline ： 禁止 iPhone Safari 视频自动全屏

x-webkit-airplay="true"支持Airplay的设备（如：音箱、Apple TV)播放

2） video DOM常用相关属性及方法

以上说的是比较常用的方法属性，更详细的可参考HTML5 Audio/Video 标签,属性,方法,事件汇总

说了这么多，来看看一些难以绕过的坎。其实相信很多同行在H5上运用video时，得到的效果未必那么近乎人意。

其中视频类H5很大的一个坑是：在微信X5浏览器打开时，视频会自动全屏播放，并且结束时会出现腾讯视频的广告。

目前在IOS下这两个问题已经得到了解决：即在标签下添加属性webkit-playsinline="true"和playsinline

部分安卓机可以通过这两个属性解决。但有些还是不行。具体什么机型，待测试…

这个问题是由于微信团队对视频来源进行了域名限制，只有挂载在qq域名下的H5才能避免上述的问题。但目前白名单申请途径已经关闭。在等待未来的更新能把这个问题解决的同时，针对安卓机，根据前辈经验，有以下这两种尝试方法。

1） 使用canvas实时绘制
细节可参考 HTML5 视频直播
本人尝试过使用上文提到的jsmpg.js解码，可行性比较高。但是声音就无法由canvas播放了。
*注意jsmpg.hs只支持解码mpeg格式的视频。所以需要使用ffmpeg 对非mpeg格式视频进行转换。

核心js：

var canvas = document.getElementById("jsmpegCanvas");
var player = new jsmpeg("mov.mpg", {canvas:canvas, autoplay:true, loop: true});

其主要思路是利用js将video实时解码，再利用canvas渲染帧。由于提到的两个js转换器没有提供设置canvas宽高的Api，所以可以尝试通过scale使canvas全屏。

之前有尝试过在同一个页面里让video播放，visibility设为hidden，直接利用requestAnimationFrame对每一帧进行canvas的drawImage。然而在安卓下只要有播放的video就仍然会自动全屏。

2） 目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。

通过video属性x5­video­player­type声明启用同层H5播放器 

使用x5­-video­-player-­fullscreen自己重新适配新的视口大小 因为默认是进入全屏播放。

但发现在video+滑屏触发时，发现存在很明显的闪屏现象，并且不能自动播放。还有一个问题是video在播放时，背景音乐会失效。该方案仍有待测试，欢迎各位同行交流。

纯CSS3的H5可以参考VM团队的那几个。仅仅利用CSS3制作出非常炫酷的效果，必须对CSS3的运用非常纯属才行。
之前写过一篇关于CSS3打造H53D方面的文章，大家可以参考下。
3D无疑是CSS3在H5中的一种灵活运用方式。再提一下其他的CSS3表现形式。

看一个案例——陌陌宣传H5

截图是某部分动画的序列帧，虽然不是特别连贯，但体验的效果并不差。

这里的实现方式是通过JS每隔一定时间切换class改变背景图的background-position
放上一个Demo大家体验

除了通过JS实时控制以外，还可以使用CSS3的animation 。

首先需要将每一帧拼接成雪碧图，这里的例子还是使用上述图片。

通过keyframes设置每帧的background-position 需要把每一帧都写入，较为繁琐

@-webkit-keyframes fresh {
    0% {
        background-position:-600px -1467px;
        }
    4.34% {
        background-position:-600px -978px;
        }
    ...
    100% {
        background-position:-900px -489px;
        }
    }

在.bg下添加animation属性

    animation: fresh steps(1,end) 4s infinite;
    -webkit-animation: fresh steps(1,end) 4s infinite;
    

另外有一种比较简单的方法，需要将每一帧按顺序拼合好雪碧图。如雪碧图从左至右必须是连贯的帧。比如这种

代码写成如下形式便可

   @-webkit-keyframes fresh {
    0% {
        background-position: 0 0;
        }
    100% {
        background-position:-900px 0;
        }
    }

    animation: fresh steps(4,end) 4s infinite;
    -webkit-animation: fresh steps(4,end) 4s infinite;

补间动画用CSS3表现起来就是最基本的transform结合 transition animation形成位移、形变、旋转等动画。可以将逐帧动画以外的旋转变换动画看成是补间动画。

想要做出能吸引用户的补间动画，可以从以下四个方面入手。

1） 明确每一个物件在每一时刻的动效

动画属性分解表 （via ISUX-H5动效的常见制作手法）

2）使用《动画十二法则》
建议细读 译文-网页动画的十二原则，了解动画制作的必要元素，怎么使自己做出的动画连贯自然。动效可以异想天开，尽可能夸张，但还是得复合物体的物理运动规则。

十二法则在h5动效上用得比较多的有
挤压、拉伸，预备动作，夸张，彰显特性，跟随，节奏等

看两个小案例

关注最左边红色小罐

下落时先有个向右的倾斜动画，再倒向左边。这符合预备动作

然后抖动几下才缓缓停下，符合缓出效果

如果红色小罐下落到触地有个拉伸挤压的过程，会使动画显得比较Q弹

而最右边的葡萄酒瓶，里面的酒跟随着酒瓶的运动。

天鹅上下漂浮，节奏起伏满足正余弦函数，符合在水中缓缓浮沉的感觉

涟漪慢慢扩散 人物的发箍跟随她上下起伏

图片来自追波和站酷，侵删。

3）关注转场动画
转场动画运用了《动画十二法则》逐帧法则，目的是使场景转换变得前后有一定的衔接性，可用于H5某一屏的切换还有某一些响应用户行为的动作。所以很多时候可以将简单的每屏推进推出，换成一种前后有关联的形式进行场景切换。

这篇文章已经将思路理得很清晰，这里就不再细说了。
功能性动画UX设计——打造优秀的过渡转场效果

4）善用工具
10 个值得前端收藏的 CSS3 动效库

还有一个比较常用的工具 贝塞尔曲线CSS生成
贝塞尔曲线可用于animation或者transition的time-funtion上，可形成某些比较特殊的动画效果。看一个运用实例 贝塞尔曲线制作弹性动画

其实原理十分简单
上图的运动可以用下面这个贝塞尔曲线表示，其中曲线的斜率可看成速度，这样就好理解了。

今天先谈到这里，下篇文章会带来H5 SVG的玩法。
^^感谢您的阅读。