微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

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

2015-10-07 19:49 前端大全

(点击上方,可快速关注)


作者:Aaron的博客

网址:http://www.cnblogs.com/aaronjs/p/4812119.html


最近在研究用视频代替动画,已经初步有成果了,顺便总结下几年开发中遇到的实际问题及给出自己的解决方案


看下最后实际效果:兼容PC,iphone, 安卓5.0


解决了,手动,自动,不全屏的问题


左边视频代替了动画,然后支持背景蒙板效果,能够透出底图


右边是原视频文件



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




前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

投稿网址:top.jobbole.com




 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 高清ICON SVG解决方案(上) - 腾讯ISUX 2016 iWeb峰会上海站 工具应用专场回顾 为生活可以忍,侮辱技术行不行? 携程无线新旅程 Swift 实现图片转字符画的功能(翻译)