专题课程
最近在研究用视频代替动画，已经初步有成果了，顺便总结下几年开发中遇到的实际问题及给出自己的解决方案
看下最后实际效果：兼容PC，iphone， 安卓5.0
解决了，手动，自动，不全屏的问题
左边视频代替了动画，然后支持背景蒙板效果，能够透出底图
右边是原视频文件
H5 audio音频
每次通过 new Audio 一个音频对象，在IOS上可以看到会产生一个新的线程，这个很恶心
解决方案：
new Audio一个对象，通过替换不同的音频地址，达到不多开线程的目的
在安卓上支持不给力
解决方案：
低版本安卓上的问题没解，一般是混合开发都是可以调底层接口处理的，比如 phonegap
iphone上不能自动播放
解决方案：
iphone上自动播放，是IOS设计的的时候做的一个处理，貌似是为了防止自动盗用流量吧
简单来说，需要模拟用户手动去触发才可以
所以我们需要在最开始调用这样一段代码：
这是我项目上的，我就直接扣过来了
假如在body上绑定这样一个代码：通过手动触发创建一个audio对象，然后保存在全局中
在使用的时候如下
直接替换音频对象即可，简单来说，就是要自动就必须是用户触发创建的对象才能播
H5 video音频
视频标签可能在移动端用的很少，安卓支持太烂了，目测5.0才好转
iphone上老问题，不能自动播放（省流量啊，省你妹!!!），并且默认就是全屏控件播放
很长一段时间里，我都没理会这个视频处理，安卓用底层，iphone直接用，内置flash与h5切换的，flash也有支持问题
前阵子老板有个需求，我们应用动画太多了，都是精灵路线的组合动画，一个app下来上百M 到几百M不等
所以急需有一个方案可以压缩图片
最后的方案是采用视频代替动画，因为视频压缩技术发展了很多年，已经十分成熟了。现在视频压缩技术，能够很轻松地将720P的
高清电影，压缩到10M/分钟，或者160K/秒。比图像序列的文件尺寸，至少小了几十倍。同时，在于大部分设备，都支持对视频的
硬件解压缩，这样呢，视频播放的CPU消耗很低，电池消耗也很低，同时播放速度还快。即使25帧的全屏幕播放，也能轻易地实现。
方案定下来，需要解决的几个问题就来了
整个视频，包括视频中的某些物体，能够响应用户的点击、滑动之类的操作
在iPhone下面，可以在一个窗口中播放
能够过滤掉背景，从而能像PNG图像一样运用
最后的实际效果也是开始gif动画所示：
视频代替了动画，然后支持背景蒙板效果，能够透出底图
同时也解决了，手动，自动，不全屏的问题
iphone窗口化
解决方案：
通过canvas + video标签结合处理
原理： 获取video的原图帧，通过canavs绘制到页面
收藏(0)
赞 
粤公网安备44010602001432号