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

2020-04-21 22:45:30易采站长站整理

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://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser

视频代替动画

这个有点麻烦,需要做交互,拖动canvas达到控制图像的目的,目前我还没有全部写完,一般的公司需求也不会有这个这里简单的描述下,同样是canvas + video处理的,但是需要有一个缓存的canvas容器做一个预处理,通过预处理,拿到每一张图的像素点,通过改变每一个像素点RBG的值,达到能够过滤掉背景,从而能像PNG图像一样运用,以后写好了,在发布吧~~