HTML5音频与视频题目及解决办法-
传统的精灵动画：
磁盘空间大，下载慢，尤为是在线播放，会更慢
文件太多，在线播放的时候，太多http要求，会致使相应慢，或者行为变态
因而，急需开发了一套技术，用视频取代精灵动画。我们称这种视频叫做交互视频
传统视频的题目：
传统视频，只能在方块形的区域中播放
传统的视频，在iPad下是窗口播放，在iPhone下面，只能全屏播放
传统的视频，播放的时候，一定会涌现在最前端
交互视频拥有如下特色：
在iPhone下面，不需要全屏播放，可以在一个区域中播放
交互视频可以涌现在普通图形对象的下面
交互视频可以带有蒙板，这样可以去除视频的配景，让视频和普通图形对象融为一体
总结：纯正播放用的视频，我们就将其设定为传统视频。而需要用于特定用法的视频，我们就将其设定为交互视频。
其研究已经初步有成果了，顺便总结下几年挪移H5开发中音频与视频碰到的现实题目及给出本人的解决方案
看下最后现实结果：兼容PC（>IE9） ，苹果，ipad， 安卓5.0
解决了苹果上，手动、主动、窗口化等题目，根本能用于现实生产了
右侧是原视频mp4文件
左边视频取代了动画，然后支撑配景蒙板结果，能够显露出底图，支撑一系列的交互操纵
//修复ios 阅读器不克不及主动播放音频的题目 在加载时新建新的audio 用的时候改换src即可
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = false
var fixaudio = function() {
if (!isAudio) {
isAudio = true;
Xut.fix.audio = new Audio();
document.removeEventListener('touchstart', fixaudio, false);
}
};
document.addEventListener('touchstart', fixaudio, false);
}假设在body上绑定这样一个代码：通过手动触发新建一个audio对象，然后保留在全局中
在运用的时候如下
//要是为ios browser 用Xut.fix.audio 指定src 初始化见app.js
if (Xut.fix.audio) {
audio
= Xut.fix.audio;
audio.src = url;
} else {
audio = new Audio(url);
}
audio.autoplay = true;
audio.play();直接替代音频对象即可，简略来说，就是要主动就必需是会员触发新建的对象才干播
H5 video音频
视频标签可能在挪移端用的很少，安卓支撑太烂了，目测5.0才好转
苹果上老题目，不克不及主动播放（省流量啊，省你妹!!!），而且默许就是全屏控件播放
很长一段工夫里，我都没理睬这个视频处置，安卓用底层，苹果直接用VideoJS，内置flash与h5切换的，flash也有支撑题目
前阵子老板有个需求，我们利用动画太多了，都是精灵道路的组合动画，一个app下来上百M 到几百M不等
所以急需有一个方案可以紧缩图片
最后的方案是采纳视频取代动画，由于视频紧缩技术开展了许多年，已经十分成熟了。此刻视频紧缩技术，能够很轻松地将720P的高清电影，紧缩到10M/分钟，或者160K/秒。比图像序列的文件尺寸，至少小了几十倍。同时，在于大局部设施，都支撑对视频的硬件解紧缩，这样呢，视频播放的CPU耗损很低，电池耗损也很低，同时播放速度还快。即便25帧的全屏幕播放，也能轻易地实现。
方案定下来，需要解决的几个题目就来了
1.整个视频，包含视频中的某些物体，能够相应会员的点击、滑动之类的操纵
2.在iPhone下面，可以在一个窗口中播放
3.能够过滤掉配景，从而能像PNG图像同样使用
最后的现实结果也是开端gif动画所示：
视频取代了动画，然后支撑配景蒙板结果，能够显露出底图
同时也解决了，手动，主动，不全屏的题目
苹果窗口化
解决方案：
通过canvas + video标签联合处置
道理： 猎取video的原图帧，通过canavs绘制到页面
这里我直接附上源码把，代码写的个别，但是突出了几个重点
http://stackoverflow.com/questions/3699552/html5-inline-video-on-苹果-vs-ipad-browser
视频取代动画
这个有点费事，需要做交互，拖动canvas达到控制图像的目的，当前我尚无全部写完，个别的企业需求也不会有这个这里简略的描述下，一样是canvas + video处置的，但是需要有一个缓存的canvas容器做一个预处置，通过预处置，拿到每一张图的像素点，通过转变每一个像素点RBG的值，达到能够过滤掉配景，从而能像PNG图像同样使用，今后写好了，在发表吧~~
