活动端H5音频与录像难题及缓解方案,详解移动端HTML5音频与录制难点及消除方案

活动端H5音频与录像难题及缓解方案,详解移动端HTML5音频与录制难点及消除方案

运动端H5音频与录像难点及化解方案

2015/09/16 · HTML5 · 1
评论 ·
视频,
音频

原稿出处:
Aaron的博客   

前不久在研商用录制代替动画,已经开头有收获了,顺便计算下几年支出中相见的实际上难点及给出自个儿的化解方案

看下最终实效:包容PC,iphone, 安卓5.0

缓解了,手动,自动,不全屏的标题

左手录制代替了动画,然后援救背景蒙板效果,能够透出底图

出手是原录像文件

图片 1

H5 audio音频

  • 每便经过 new 奥迪(Audi)o
    3个旋律对象,在IOS上得以看出会发生二个新的线程,这几个很恶心

涸泽而渔方案:

new 奥迪o一个指标,通过轮换差别的节奏地址,达到不多开线程的指标

  • 在安卓上支撑不给力

焚薮而田方案:

低版本安卓上的难点没解,一般是参差不齐开发都是能够调底层接口处理的,比如
phonegap

  • iphone上不能够自动播放

竭泽而渔方案:

iphone上自动播放,是IOS设计的的时候做的二个处理,貌似是为着幸免自动盗用流量吧

简不难单来说,需求效法用户手动去触发才能够

故此大家供给在最伊始调用那样一段代码:

那是笔者项目上的,小编就直接扣过来了

JavaScript

//修复ios 浏览器不可能自动播放音频的难题 在加载时创设新的audio
用的时候更换src即可 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser &&
Xut.plat.isIOS) { var is奥迪o = false var fixaudio = function() { if
(!isAudio) { isAudio = true; Xut.fix.audio = new Audio();
document.removeEventListener(‘touchstart’, fixaudio, false); } };
document.addEventListener(‘touchstart’, fixaudio, false); }

1
2
3
4
5
6
7
8
9
10
11
12
13
//修复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上绑定那样多个代码:通过手动触发创制3个audio对象,然后保留在大局中

在动用的时候如下

JavaScript

//借使为ios browser 用Xut.fix.audio 钦点src 起先化见app.js if
(Xut.fix.audio) { audio = Xut.fix.audio; audio.src = url; } else { audio
= new 奥迪o(url); } audio.autoplay = true; audio.play();

1
2
3
4
5
6
7
8
9
10
11
//如果为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不等

所以须要有贰个方案能够削减图片

末尾的方案是使用摄像代替动画,因为摄像压缩技术发展了许多年,已经11分成熟了。现在摄像压缩技术,能够很轻松地将720P的

高清电影,压缩到10M/分钟,也许160K/秒。比图像类别的文件尺寸,至少小了几十倍。同时,在于超过约得其半设施,都帮衬对摄像的

硬件解压缩,那样吗,摄像播放的CPU消耗非常低,电池消耗也非常的低,同时播放速度还快。尽管25帧的全显示屏播放,也能自由地实

现。

方案定下来,必要解决的多少个难题就来了

  1. 一体录像,包涵录制中的有些物体,能够响应用户的点击、滑动之类的操作
  2. 在Motorola上边,能够在二个窗口中播放
  3. 可见过滤掉背景,从而能像PNG图像一样使用

最后的实效也是发端gif动画所示:

录制代替了动画片,然后协理背景蒙板效果,能够透出底图

还要也消除了,手动,自动,不全屏的问题

iphone窗口化

消除方案:

因而canvas + video标签结合处理

规律: 获取video的原图帧,通过canavs绘制到页面

这边作者一贯依附源码把,代码写的貌似,可是杰出了多少个重庆大学

1 赞 2 收藏 1
评论

图片 2

详解移动端HTML5音频与摄像难题及缓解方案,html5音频

如今在研讨用摄像代替动画,用摄像代替天使动画,我们称那种摄像叫做交互录制。

历史观的灵活动画:

  1. 磁盘空间大,下载慢,尤其是在线播放,会更慢
  2. 文本太多,在线播放的时候,太多http请求,会促成响应慢,也许作为有失水准

故而,急需开发了一套技术,用视频代替天使动画。大家称那种录制叫做交互录像

价值观录像的难题:

  1. 历史观录制,只辛亏方块形的区域中播放
  2. 古板的录像,在GALAXY Tab下是窗口播放,在黑莓上边,只可以全屏播放
  3. 价值观的录制,播放的时候,一定会冒出在最前端

互动录像具有如下特点:

  1. 在OPPO上边,不须求全屏播放,能够在1个区域中播放
  2. 互动录制能够出现在平凡图形对象的底下
  3. 相互摄像能够涵盖蒙板,那样能够去掉录像的背景,让摄像和常见图形对象融合为一

 总结:偏偏播放用的录制,我们就将其设置为观念摄像。而须要用于特定用途的摄像,大家就将其设置为相互摄像。

其研讨已经起来有成果了,顺便总计下几年活动H5开发中音频与录像境遇的实际上难点及给出自身的消除方案

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

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

左边是原录像mp4文件

左侧摄像代替了动画片,然后支持背景蒙板效果,能够透出底图,辅助一多重的互相操作

图片 3

H5 audio音频

历次经过 new 奥迪o
四个旋律对象,在IOS上得以见见会发生二个新的线程,这么些很恶心

缓解方案:new
奥迪(Audi)o1个对象,通过轮换不一致的韵律地址,达到不多开线程的指标

在安卓上帮助不给力

化解方案:低版本安卓上的难题没解,一般是勾兑开发都以能够调底层接口处理的,比如
phonegap

iphone上不能够自动播放

不留余地方案:iphone上自动播放,是IOS设计的的时候做的1个拍卖,貌似是为着防备自动盗用流量吧

简易的话,须要效法用户手动去触发才能够,所以大家须求在最开始调用那样一段代码:

那是自己项目上的,笔者就直接扣过来了

//修复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也有支撑难点

前阵子COO有个供给,我们采纳动画太多了,都以敏感路线的组合卡通,3个app下来上百M
到几百M不等

故此必要有二个方案能够削减图片

终极的方案是运用录像代替动画,因为摄像压缩技术升高了不少年,已经不行老奸巨猾了。以后摄像压缩技术,能够很轻松地将720P的高清影片,压缩到10M/分钟,或许160K/秒。比图像类别的文件尺寸,至少小了几十倍。同时,在于大多数装备,都协理对录像的硬件解压缩,那样吧,录像播放的CPU消耗十分的低,电池消耗也极低,同时播报速度还快。就算25帧的全显示屏播放,也能自由地贯彻。

方案定下来,供给消除的几个难题就来了

1.全部录像,包涵录像中的某个物体,能够响应用户的点击、滑动之类的操作
2.在Samsung上边,能够在多少个窗口中播放
3.力所能及过滤掉背景,从而能像PNG图像一样选用

最终的实际效果也是始于gif动画所示:

录制代替了动画,然后帮忙背景蒙板效果,可以透出底图

再便是也化解了,手动,自动,不全屏的题材 

iphone窗口化

缓解方案:

经过canvas + video标签结合处理

原理: 获取video的原图帧,通过canavs绘制到页面

那里本人直接附上源码把,代码写的相似,可是杰出了多少个第2

录像代替动画

那个有点麻烦,必要做交互,拖动canvas达到控制图像的指标,如今自家还不曾任何写完,一般的集团必要也不会有其一那里大致的描述下,同样是canvas
+
video处理的,不过需求有三个缓存的canvas容器做2个预处理,通过预处理,获得每一张图的像素点,通过改动每2个像素点RBG的值,达到能够过滤掉背景,从而能像PNG图像一样选用,现在写好了,在发表吧~~

如上就是本文的全体内容,希望对大家的学习抱有帮忙,也可望我们多多协助帮客之家。

如今在研讨用录像代替动画,用录制代替天使动画,大家称那种摄像叫做交互摄像。…

移步端H5音频与录制难题及化解方案

看下最终实效:包容PC,iphone, 安卓5.0

化解了,手动,自动,不全屏的难点

左手录制代替了动画片,然后辅助背景蒙板效果,能够透出底图

出手是原录像文件

图片 1

H5 audio音频

  • 每一遍经过 new 奥迪(Audi)o
    二个旋律对象,在IOS上得以看到会生出3个新的线程,那几个很恶心

解决方案:

new 奥迪o一个目的,通过轮换差异的点子地址,达到不多开线程的目标

  • 在安卓上帮忙不给力

化解方案:

低版本安卓上的难题没解,一般是勾兑开发都是足以调底层接口处理的,比如
phonegap

  • iphone上不可能自动播放

缓解方案:

iphone上自动播放,是IOS设计的的时候做的多少个甩卖,貌似是为着以免自动盗用流量吧

简短来说,需求效法用户手动去触发才能够

从而大家需求在最开始调用那样一段代码:

那是自己项目上的,作者就径直扣过来了

 

 

 

 

 

JavaScript

 

1
2
3
4
5
6
7
8
9
10
11
12
13
//修复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上绑定那样2个代码:通过手动触发成立三个audio对象,然后保留在全局中

在利用的时候如下

 

 

 

 

 

JavaScript

 

1
2
3
4
5
6
7
8
9
10
11
//如果为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也有帮忙难点

前阵子CEO有个要求,大家利用动画太多了,都以灵动路线的结合卡通,2个app下来上百M
到几百M不等

就此须要有二个方案得以减掉图片

最后的方案是应用摄像代替动画,因为录像压缩技术发展了许多年,已经十三分成熟了。以往摄像压缩技术,能够很轻松地将720P的

高清电影,压缩到10M/秒钟,只怕160K/秒。比图像系列的文件尺寸,至少小了几十倍。同时,在于当先四分之二设施,都援助对录制的

硬件解压缩,那样啊,录制播放的CPU消耗非常低,电池消耗也极低,同时播报速度还快。即便25帧的全显示器播放,也能随便地实

现。

方案定下来,供给缓解的多少个难点就来了

  1. 方方面面摄像,包罗录像中的有个别物体,可以响应用户的点击、滑动之类的操作
  2. 在金立上面,能够在四个窗口中播放
  3. 可见过滤掉背景,从而能像PNG图像一样选拔

终极的实效也是初始gif动画所示:

摄像代替了动画片,然后支持背景蒙板效果,能够透出底图

还要也化解了,手动,自动,不全屏的题材

iphone窗口化

消除方案:

因而canvas + video标签结合处理

规律: 获取video的原图帧,通过canavs绘制到页面

此间小编一直附上源码把,代码写的貌似,不过优良了多少个根本

 

浅谈基于HTML5的在线录像播放方案_html5学科学技术巧

方今在那一个特出的时日下:flash将死未死,微软软IE的野史难题,html5专业未定,苹果和Google的闭源和开源之争,移动互连网的终将,浏览器各自为战…这几个都导致web开发者在统一筹划录制化解方案的时候一定质疑。本文围绕那么些主旨,来探索一下连锁的技巧,原理和工具。

编码与格式的误区 多多个人将编码和格式误认为是同二个东西,往往以录像文件的后缀来唯一鲜明录像文件的协理程度。而实际上,用一句话来总结正是:录制的文件后缀(假若没有恶意修改后缀)实际上意味着一种封装格式,而摄像可能音频的编码算法与封装格式本人无直接的涉嫌:同样的封装格式(即一律的后缀)可以打包分化编码算法的录制和韵律。而录像播放设备或软件是或不是帮助录制的播放,不仅仅要看封装格式,还要看编码算法。认清那或多或少是知道和排查难点的功底。

封装格式规定了录像的富有情节,包涵图像,声音,字幕,系统控制等,当中以图像和音响最为关键。

从MPEG说起 MPEG是1个概念录像规格的国际协会,他们一度生产的MPEG-1和MPEG-2实际上分别就是豪门熟悉的mp4和mp5,不过那都是清代的事物了。大家来看看跟本文核心有关的MPEG-4规范。

MPEG-4规范规定了文本后缀名为.mp3,近来包蕴三种图像编码和压缩算法:Xvid\DivX\AVC(H.264),当中Xvid和DivX也得以统称为MPEG-4
Part 2也许MPEG-4
Visual,而进一步有名的H.264和AVC是同一的定义。音频方面则是AAC。以下关于包容的剧情,来源于维基百科和格式工厂以及作者的测试:

Android浏览器:扶助DivX和AVC,Xvid应该不补助
iPhone和iPad(iOS):支持DivX和AVC,Xvid不支持
Chrome:协理AVC,不帮忙DivX和Xvid。谷歌(Google)曾在二零一三年头揭橥由于许可难题,将移除Chrome浏览器对AVC(H.264)的支持。可是直到当前的本子,AVC还在被支持。此外,实际测试下来,如若是DivX和AAC封装在mp5中的话,chrome能够播放,可是唯有声音(AAC)。
Firefox和Opera:还是出于许可的题材,Firefox和Opera渐渐动摇了对AVC的帮忙,小编在新式的Firefox中测试AVC如故能够播放(维基百科的分解是或者与系统自个儿有着解码器有关);至于DivX和Xvid,笔者在Firefox下的测试结果是不支持。从维基百科的合营列表看,Opera对AVC协助的不得了。
IE:小编的IE11可见支持AVC,不扶助DivX和Xvid
WebM的倡导
由于AVC(H.264)的授权难点,以Chrome、Firefox、Opera为首的开源阵营起始动摇对AVC的扶助,尽管近年来这个浏览器还是能够够支持AVC,可是它们也赞同于二个称为WebM的开源多媒体项目,该类型蕴含一个叫VP8的新的开源录制编解码方案。如今VP8已经进化到了VP9。作为封装格式的WebM具有.webm的后缀和video/webm的MIME类型。在点子方面,能够运用Vorbis/Opus。从包容性看,Chrome、Firefox、Opera对VP8的包容性万分不错,不过Safari和IE差不离不只怕支撑。

开源的Ogg Ogg大约与WebM相同,开源,被大规模的在开源平台支撑。其摄像编码方案称为西奥ra(有VP3发展而来,由Xiph.org基金会开发,可被用于别的封装格式),音频为Vorbis。后缀平时为.ogv或.ogg,MIME类型为video/ogg。在包容性上,Chrome、Firefox、Opera能够支持(不过Opera在移动平台上不能够支撑),不过Safari和IE大概无法支撑。

Html5方案 以上的议论实际上的大前提是:录制基于Html5的<video>方案。未来大家来总计一下包容性:
图片 5

*IE9 “唯有当用户安装了VP8的编解码器时”才能支撑VP8。

‡谷歌 Chrome 二零一二年颁发 吐弃H.264, 可是“还没落成”。
能够见到今后主流的依然是mp5(AVC),可是为了消除“开源阵营”对AVC的内忧外患,能够选用接纳video的多源方案,在AVC的底子上分外提供对webm或ogg的支撑:

XML/HTML Code复制内容到剪贴板

  1. <video poster=”movie.jpg” controls>  
  2.   <source src=”movie.webm” type=’video/webm; codecs=”vp8.0, vorbis”‘>  
  3.   <source src=”movie.ogg” type=’video/ogg; codecs=”theora, vorbis”‘>  
  4.   <source src=”movie.mp4″ type=’video/mp4; codecs=”avc1.4D401E, mp4a.40.2″‘>  
  5.   <p>This is fallback content</p>  
  6. </video>  

浏览器会依照本人的溺爱来挑选具体加载那种格式的流媒体文件,当然服务端必须对同贰个摄像提供多样格式的扶助,具体能够这么做:

提供多少个WebM的视频版本(VP8+Vorbis)
提供三个MP3的录制版本(H.264+AAC(low complexity))
提供Ogg版本(Theora+Vorbis)
服务端推荐使用nginx,尽量注意MIME类型的布局不错

旧版本的IE和flash 在html5盛行从前,通用的录制播放消除方案是flash和flv(flash从9起始补助h.264的VCD)。可是随着ios设备的风行,flash已经不是万能药了,更多的录像网站提供类别的消除方案,而且偏向于html5:也正是说,通过检查和测试agent是还是不是匡助html5来控制采取video还是flash。在面对IE8以下的浏览器时,flash大约是绝无仅有的选用(silverlight的接受度普遍不高)。

理所当然针对flash和flv的方案,也有二种完毕格局,作者能够想到的有如下二种:

服务端依照agent的品种,输出分裂的html,要是支持html5就输出video+mp5(avc)和webm(也许ogg),不然输出flash相关的竹签或脚本
利用html5shiv和html5-video是IE也能够协助video标签,并且选取Flash播放器来取代原生的video播放。
将object内嵌在video中:

XML/HTML Code复制内容到剪贴板

  1. <video id=”movie” width=”320″ height=”240″ preload controls>  
  2.   <source src=”pr6.webm” type=”video/webm; codecs=vp8,vorbis” />  
  3.   <source src=”pr6.ogv” type=”video/ogg; codecs=theora,vorbis” />  
  4.   <source src=”pr6.mp4″ />  
  5.   <object width=”320″ height=”240″ type=”application/x-shockwave-flash”  
  6.     data=”flowplayer-3.2.1.swf”>  
  7.     <param name=”movie” value=”flowplayer-3.2.1.swf” />  
  8.     <param name=”allowfullscreen” value=”true” />  
  9.     <param name=”flashvars” value=”config={‘clip’: {‘url’: ”, ‘autoPlay’:false, ‘autoBuffering’:true}}” />  
  10.     <p>Download video as <a href=”pr6.mp4″>MP4</a>, <a href=”pr6.webm”>WebM</a>, or <a href=”pr6.ogv”>Ogg</a>.</p>  
  11.   </object>  
  12. </video>  

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图