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

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

视频类

一、体验案例

视频类h5能够带给用户动效逼真，流畅的体验。虽说制做视频的难度较大，可是瑕不掩瑜，一支视频能够尽量地创造出天马行空的想法，一些短期内没法经过代码创造出的酷炫效果。
首先放上两个案例供你们体验。

1） 金馆长直播间

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

2） QQ钱包二周年

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

二、基本概念

想在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 标签,属性,方法,事件汇总

三、常见坑

说了这么多，来看看一些难以绕过的坎。其实相信不少同行在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表现形式。

一、帧动画

看一个案例——陌陌宣传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;

二、补间动画

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

想要作出能吸引用户的补间动画，能够从如下四个方面入手。

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

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

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

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

看两个小案例

关注最左边红色小罐

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

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

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

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

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

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

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

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

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

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

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

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

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