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

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

视频类

1、体验案例

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

1） 金馆长直播间

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

2） QQ钱包二周年

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

2、基本概念

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

1） <video>标签属性

• src ：视频地址

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

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

• preload：预加载

• autoplay：自动播放

• loop：循环播放

• controls：浏览器自带的控制条

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

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

<video id="video" src="mov.mp4" preload="auto" poster="" currenttime=0 webkit-playsinline="true" playsinline loop x-webkit-airplay="true" controls autoplay>

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

事件	描述
canplaythrough	表示资源缓冲完毕，可以播放
durationchange	资源长度改变，执行一次
play	资源实际开始播放，autoplay和play()都会触发play事件
playing	同上 执行一次
pause	pause()时触发
progress	资源播放过程中多次执行
ended	结束时触发 loop时不触发该事件

属性	描述
currentSrc	返回资源地址
currentTime	返回当前播放进度，可设置
duration	返回资源总时长
paused	资源是否已停止
ended	资源是否已播完

方法	描述
play()	播放资源
pause()	暂停资源
load()	重新加载src指定的资源

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

3、常见坑

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

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

目前在IOS下这两个问题已经得到了解决：即在<video>标签下添加属性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播放器 

  <video src="http://xxx.mp4" x5-video-player-type="h5"/> 

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

  <video id="test_video" src="xxx" x5-video-player-type="h5" x5-vide o-player-fullscreen="true"/> 
  
  

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

CSS3动画类

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

1、帧动画

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

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

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

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

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

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

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

3. 在.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;

2、补间动画

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

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

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

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

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

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

看两个小案例

关注最左边红色小罐

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

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

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

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

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

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

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

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

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

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

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

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

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