移动端HTML5音频与视频问题及解决方案_Aaron_P的博客-程序员宅基地

技术标签： H5

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

传统的精灵动画：

- 磁盘空间大，下载慢，尤其是在线播放，会更慢
- 文件太多，在线播放的时候，太多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帧的全屏幕播放，也能轻易地实

现。

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

整个视频，包括视频中的某些物体，能够响应用户的点击、滑动之类的操作
在iPhone下面，可以在一个窗口中播放
能够过滤掉背景，从而能像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图像一样运用，以后写好了，在发布吧~~

本文链接：https://blog.csdn.net/weixin_40914497/article/details/78495019

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

excel两个指标相关性分析_相关分析与回归分析 Excel 和 R计算皮尔逊相关系数（Pearson correlation）...-程序员宅基地

在统计学上，计算了平均数，方差，理解概率分布之后，就要计算多种变量之间的相关系数，以及其因果关系了。另外，χ2检验方法能同时检验一个因素两项或多项分类的实际观察数与某理论次数分布是否相一致的问题，或说有无显著差异问题。所谓实际观察数简称实计数或实际数，是指在实验或调查中所得到的计数资料，而理论次数是指根据概率原理、某种理论、某种理论次数分布或经验次数分布所计算出来的次数。对于这些计数数据进行统计分..._excel能表示因果关系的分析方法

如何解决fork: retry: 资源暂时不可用_-bash: fork: retry: 资源暂时不可用-程序员宅基地

当出现/bin/sh: fork: retry: 资源暂时不可用这样的报错时，说明Linux的open file最大连接数已满。解决的方法如下：1）修改/etc/security/limits.d/90-nproc.conf,将npoc设置最大。修改后，内容如下：cat /etc/security/limits.d/90-nproc.conf* soft n..._-bash: fork: retry: 资源暂时不可用

java制作海报二：java使用Graphics2D 在图片上合成另一个照片，并将照片切割成头像，头像切割成圆形方法详解_graphics2d 头像-程序员宅基地

文章目录前言一、核心代码二、测试代码，可直接生成三、生成的图片如下前言代码都上传到GitHub了，这里仅仅是贴出来主要部分，GitHub传送门：https://github.com/fengfanli/draw_poster_echarts海报制作的所有博客和一些问题：文字换行算法详解，传送门：头像切割成圆形方法详解，传送门：获取微信二维码详情，传送门：java BufferedImage 转 InputStream，传送门：png 图片合成到模板（另一个图片）上时，透明部分变成了黑色_graphics2d 头像

引用使用方法概述_引用怎么操作-程序员宅基地

一、引用简介引用就是某一变量（目标）的一个别名，对引用的操作与对变量直接操作完全一样。引用的声明方法：类型标识符 &引用名=目标变量名；eg：int a; int &b=a; //定义引用b,它是变量a的引用，即别名说明：（1）&在此不是求地址运算，而是起标识作用。（2）类型标识符是指目标变量的类型。（3）声明引用时，必须同时对其进行初始化。（4）引用声明..._引用怎么操作

13年收益不错的外汇EA-Volatility Master v1-程序员宅基地

这是一款不引人注目的外汇EA。但从它2013年实盘交易结果来看，它应该算是一款比较稳定的EA,最好的外汇EA，整个2013年最终收益也有70%,外汇EA下载，也算比较可观了！还请大家自己再仔细研究下 ,外汇EA之家;官网实盘记录：（点击下图可以进行myfxbook查看详细交易记录！） 2013年官方实盘收益柱形图：官方网站：www.volati

学习笔记4：数据的存储_摆烂小青菜的博客-程序员宅基地

数据的存储学习笔记