摘要：但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。
本文在H5动效的常见制作手法的基础上，对相印的H5动效制作手法进行了扩展和整理，并结合案例谈谈怎么将其做得生动。
视频类 1、体验案例视频类h5可以带给用户动效逼真，流畅的体验。虽然说制作视频的难度较大，但是瑕不掩瑜，一支视频可以尽可能地创造出天马行空的想法，一些短时间内无法通过代码创造出的酷炫效果。
首先放上两个案例供大家体验。
1） 金馆长直播间
实现还是比较简单的，交互就是通过用户点击无缝切换不同的视频，基本每个能按到的tab都可以对应一支视频，让用户很有参与感
2） QQ钱包二周年
其中三支视频的交互在于可以由用户拖动滑块，通过设置currentTime实时控制视频进度，拖动到末端时触发视频播放事件。我觉得也是很有趣的。
2、基本概念想在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常用相关属性及方法
| 事件 | 描述 |
|---|---|
| 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下这两个问题已经得到了解决：即在标签下添加属性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播放器
使用x5-video-player-fullscreen自己重新适配新的视口大小 因为默认是进入全屏播放。
但发现在video+滑屏触发时，发现存在很明显的闪屏现象，并且不能自动播放。还有一个问题是video在播放时，背景音乐会失效。该方案仍有待测试，欢迎各位同行交流。
CSS3动画类纯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;
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的玩法。
^^感谢您的阅读。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/55755.html
摘要：但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。 本文在H5动效的常见制作手法的基础上，对相印的H5动效制作手法进行了扩展和整理，并结合案例谈谈怎么将其做得生动。 视频类 1、体验案例 视频类h5可以带给用户动效逼真，流畅的体验。虽然说制作视频的难度较大，但是瑕不掩瑜，一支视频可以尽可能地创造出...
摘要：但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。 本文在H5动效的常见制作手法的基础上，对相印的H5动效制作手法进行了扩展和整理，并结合案例谈谈怎么将其做得生动。 视频类 1、体验案例 视频类h5可以带给用户动效逼真，流畅的体验。虽然说制作视频的难度较大，但是瑕不掩瑜，一支视频可以尽可能地创造出...
摘要：在正式前端一些小细节前端掘金英文原文，翻译未来的太让人兴奋了一方面，是全新的页面布局方式另一方面，是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/d...，用CSS3实现了一下，顺便...
摘要：前言日前，造物节放肆地火了一把。作为一个叙事性的，它的场景和动效全部基于代码实现，而抛弃了视频这种方式。但它与用户的交互比较少，因而并不能直观体现出这是完全基于代码实现的。很好地为我们诠释了，以变换打造亦不是为一种明智的低成本的实现方式。 前言 日前，taobao造物节H5放肆地火了一把。相信接下来将3d嵌入网站的这种营销方式会被越来越多的人留意到。工作之余体验了若干个3d H5页面，...
阅读 3060·2021-11-18 10:02
阅读 3498·2021-10-12 10:11
阅读 2663·2019-08-30 13:56
阅读 297·2019-08-29 12:36
阅读 412·2019-08-28 18:07
阅读 609·2019-08-27 10:51
阅读 3324·2019-08-26 12:13
阅读 3135·2019-08-26 11:46
