谈谈常见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属性x5videoplayertype声明启用同层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 。

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

通过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;