移动HTML5音频和视频问题和解决方案

最近，我们正在研究使用视频而不是动画以及使用视频而不是精灵动画。我们称这种视频为交互式视频。

传统的Sprite动画：磁盘空间大，下载缓慢（尤其是在线播放）会更慢
在线播放时文件太多，http请求太多，将导致响应缓慢或异常行为。因此，迫切需要开发一套技术来用视频代替精灵动画。我们称这类视频为互动视频

传统视频的问题：

1.只能在方形区域播放
2.在iPad下，它是一个播放窗口，而在iPhone下，它只能全屏播放。
3.演奏时一定会出现在最前列

交互式视频具有以下特征：

在iPhone下，不需要全屏播放，可以在一个区域播放
交互式视频可以出现在普通图形对象下方
交互式视频可以具有蒙版，以便可以删除视频的背景，并且可以将视频和普通图形对象集成在一起

概要：对于用于播放的视频，我们将其设置为传统视频。对于需要用于特定用途的视频，我们将其设置为交互式视频。研究取得了初步成果。顺便总结了未来几年移动H5音视频发展中遇到的实际问题，并给出了自己的解决方案。看看最终的实际效果：兼容PC（>IE9）、iphone、ipad、Android 5.0

解决iPhone手动、自动、开窗问题，可基本用于实际生产。右边是原视频mp4文件，左边的视频替换了动画，然后支持背景遮罩效果，可以显示底图，支持一系列交互操作

H5音讯

每次音频对象通过新的音频传递时，都可以在IOS上看到新的线程。
解决方案：通过替换不同的音频地址，一个新的Audio对象达到了不打开更多线程的目的。

在Android上的支持不好
解决方案：较低版本的Android上的问题未解决。通常，可以通过调整底层界面（例如phonegap）来处理混合开发

无法在iPhone上自动播放
解决方案：在iPhone上自动播放是在设计IOS时完成的过程。看来是为了防止流量自动盗窃。

简而言之，它需要通过模拟用户来手动触发，因此我们需要在一开始就调用这段代码：

复制代码
//修复ios浏览器无法自动播放音频的问题。加载时创建新的音频，并在使用时替换src。
Xut.fix = Xut.fix || {};
如果（Xut.plat.isBrowser && Xut.plat.isIOS）{
    var isAudio = false
    var fixaudio = function（）{
        如果（！isAudio）{
            isAudio =真；
            Xut.fix.audio =新的Audio（）;
            document.removeEventListener（'touchstart'，fixaudio，false）;
        }
    };
    document.addEventListener（'touchstart'，fixaudio，false）;
}
复制上面的代码
如果将这样的代码绑定到主体，请执行以下操作：手动触发音频对象，然后将其保存在全局对象中

如下使用时：

复制代码
//如果您使用Xut.fix.audio为ios浏览器指定src，请参考app.js进行初始化
如果（Xut.fix.audio）{
    音频
=
Xut.fix.音频；
    audio.src =网址;
} {
    音频=新的音频（URL）;
}
音频。自动播放=真；
audio.play（）;

只需更换音频对象。简而言之，它必须是用户触发创建的对象才能播放。

H5视频音频

视频标签可能很少在移动终端上使用，Android支持太差，从视觉上看5.0更好。 iPhone上的旧问题无法自动播放（保存数据，请保存您的妹妹！！！），默认为全屏播放。很长一段时间，我都忽略了这种视频处理。 Android使用最底层，iPhone直接使用VideoJS，内置闪光灯和h5开关，闪光灯也有支持问题。前一段时间，老板有要求。我们应用了太多的动画，所有这些动画都是sprite路线的组合动画，一个应用程序下的动画范围从数百兆字节到数百兆字节，因此迫切需要一种压缩图像的解决方案。最终的解决方案是使用视频而不是动画，因为视频压缩技术已经开发了很多年并且已经非常成熟。现在，视频压缩技术可以轻松转换720P。高清电影，压缩为10M / min或160K / sec。图像序列的文件大小至少要小几十倍。同时，大多数设备都支持视频的硬件解压缩，因此视频播放的CPU消耗非常低，电池消耗也非常低，播放速度也很快。甚至可以轻松实现25帧的全屏播放。

该计划已最终确定，这里有几个要解决的问题。

整个视频（包括视频中的某些对象）可以响应用户在iPhone下的单击，幻灯片和其他操作，可以在窗口中播放，可以滤除背景，并且可以像PNG图像一样使用。视频替换动画，然后支持背景遮罩效果，可以显示基本图像，还解决了手动，自动和屏幕不完整的问题

iPhone开窗

解决方案：通过画布+视频标签合并处理

原理：获取视频的原始图像帧并通过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容器来进行预处理。通过预处理，获取每个图片的像素，并通过更改每个像素RBG的值，可以滤除背景，因此可以像PNG图像一样使用它。我待会写出来再发表吧~~