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


Posted in HTML / CSS onAugust 22, 2018

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

传统的精灵动画:

  1. 磁盘空间大,下载慢,尤其是在线播放,会更慢
  2. 文件太多,在线播放的时候,太多http请求,会导致响应慢,或者行为失常

因此,急需开发了一套技术,用视频代替精灵动画。我们称这种视频叫做交互视频

传统视频的问题:

  1. 传统视频,只能在方块形的区域中播放
  2. 传统的视频,在iPad下是窗口播放,在iPhone下面,只能全屏播放
  3. 传统的视频,播放的时候,一定会出现在最前端

交互视频具有如下特点:

  1. 在iPhone下面,不需要全屏播放,可以在一个区域中播放
  2. 交互视频可以出现在普通图形对象的下面
  3. 交互视频可以带有蒙板,这样可以去掉视频的背景,让视频和普通图形对象融为一体

 总结:单纯播放用的视频,我们就将其设置为传统视频。而需要用于特定用途的视频,我们就将其设置为交互视频。

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

看下最后实际效果:兼容PC(>IE9) ,iphone,ipad, 安卓5.0

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

右边是原视频mp4文件

左边视频代替了动画,然后支持背景蒙板效果,能够透出底图,支持一系列的交互操作

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

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

视频代替动画

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 #HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 #HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 #HTML / CSS
html5 分层屏幕适配的方法
Mar 16 #HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 #HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 #HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 #HTML / CSS
You might like
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
php解析json数据实例
2014/08/19 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
javascript中的location用法简单介绍
2007/03/07 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
js时间控件只显示年月
2017/01/08 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
iView框架问题整理小结
2018/10/16 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
动态创建类实例代码
2009/10/07 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
优秀班主任经验交流材料
2014/06/02 职场文书
病危通知书样本
2015/04/17 职场文书
幸福来敲门观后感
2015/06/04 职场文书
2019消防宣传标语!
2019/07/10 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
浅析MongoDB之安全认证
2021/06/26 MongoDB
Redis Stream类型的使用详解
2021/11/11 Redis