移动端HTML5音频与视频问题及解决方案

最近在研究用视频代替动画，用视频代替精灵动画，咱们称这种视频叫作交互视频。

传统的精灵动画：

• 磁盘空间大，下载慢，尤为是在线播放，会更慢
• 文件太多，在线播放的时候，太多http请求，会致使响应慢，或者行为失常

所以，急需开发了一套技术，用视频代替精灵动画。咱们称这种视频叫作交互视频

 

传统视频的问题：

• 传统视频，只能在方块形的区域中播放
• 传统的视频，在iPad下是窗口播放，在iPhone下面，只能全屏播放
• 传统的视频，播放的时候，必定会出如今最前端

交互视频具备以下特色：

• 在iPhone下面，不须要全屏播放，能够在一个区域中播放
• 交互视频能够出如今普通图形对象的下面
• 交互视频能够带有蒙板，这样能够去掉视频的背景，让视频和普通图形对象融为一体

 总结：单纯播放用的视频，咱们就将其设置为传统视频。而须要用于特定用途的视频，咱们就将其设置为交互视频。

 

其研究已经初步有成果了，顺便总结下几年移动H5开发中音频与视频遇到的实际问题及给出本身的解决方案

看下最后实际效果：兼容PC（>IE9） ，iphone，ipad， 安卓5.0

解决了iphone上，手动、自动、窗口化等问题，基本能用于实际生产了

右边是原视频mp4文件

左边视频代替了动画，而后支持背景蒙板效果，可以透出底图，支持一系列的交互操做

 

 

H5 audio音频

• 每次经过 new Audio 一个音频对象，在IOS上能够看到会产生一个新的线程，这个很恶心

解决方案：

new Audio一个对象，经过替换不一样的音频地址，达到很少开线程的目的

 

• 在安卓上支持不给力

解决方案：

低版本安卓上的问题没解，通常是混合开发都是能够调底层接口处理的，好比 phonegap

 

• iphone上不能自动播放

解决方案：

iphone上自动播放，是IOS设计的的时候作的一个处理，貌似是为了防止自动盗用流量吧

简单来讲，须要模拟用户手动去触发才能够

因此咱们须要在最开始调用这样一段代码：

这是我项目上的，我就直接扣过来了

//修复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才好转

iphone上老问题，不能自动播放（省流量啊，省你妹!!!），而且默认就是全屏控件播放

很长一段时间里，我都没理会这个视频处理，安卓用底层，iphone直接用VideoJS，内置flash与h5切换的，flash也有支持问题

前阵子老板有个需求，咱们应用动画太多了，都是精灵路线的组合动画，一个app下来上百M 到几百M不等

因此急需有一个方案能够压缩图片

 

最后的方案是采用视频代替动画，由于视频压缩技术发展了不少年，已经十分红熟了。如今视频压缩技术，可以很轻松地将720P的

高清电影，压缩到10M/分钟，或者160K/秒。比图像序列的文件尺寸，至少小了几十倍。同时，在于大部分设备，都支持对视频的

硬件解压缩，这样呢，视频播放的CPU消耗很低，电池消耗也很低，同时播放速度还快。即便25帧的全屏幕播放，也能轻易地实

现。

 

方案定下来，须要解决的几个问题就来了

1. 整个视频，包括视频中的某些物体，可以响应用户的点击、滑动之类的操做
2. 在iPhone下面，能够在一个窗口中播放
3. 可以过滤掉背景，从而能像PNG图像同样运用

最后的实际效果也是开始gif动画所示：

视频代替了动画，而后支持背景蒙板效果，可以透出底图

同时也解决了，手动，自动，不全屏的问题

 

iphone窗口化

解决方案：

经过canvas + video标签结合处理

原理： 获取video的原图帧，经过canavs绘制到页面

这里我直接附上源码把，代码写的通常，可是突出了几个重点

http://iwearshorts.com/blog/inline-video-on-the-iphone/

http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser

 

视频代替动画

这个有点麻烦，须要作交互，拖动canvas达到控制图像的目的，目前我尚未所有写完，通常的公司需求也不会有这个

这里简单的描述下，一样是canvas + video处理的，可是须要有一个缓存的canvas容器作一个预处理

经过预处理，拿到每一张图的像素点，经过改变每个像素点RBG的值，达到可以过滤掉背景，

从而能像PNG图像同样运用，之后写好了，在发布吧~~