详解移动端HTML5音频与视频问题及解决方案,HTML5的在线视频播放方案

活动端H5音频与录像难点及减轻方案

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

初藳出处:
Aaron的博客   

近来在研商用录制代替动画,已经带头有收获了,顺便计算下几年开垦中相见的莫过于难点及给出本身的施工方案

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

消除了,手动,自动,不全屏的主题材料

左侧摄像代替了动画,然后扶助背景蒙板效果,能够透出底图

左边是原摄像文件

图片 1

H5 audio音频

  • 每一遍经过 new 奥迪(Audi)o
    叁个节奏对象,在IOS上能够观察会发出三个新的线程,这些很恶心

建设方案:

new 奥迪(Audi)o二个对象,通过轮换区别的韵律地址,达到相当少开线程的指标

  • 在安卓上援助不给力

施工方案:

低版本安卓上的标题没解,平时是勾兑开辟都以能够调底层接口管理的,举个例子phonegap

  • iphone上无法自动播放

一网打尽方案:

iphone上自动播放,是IOS设计的的时候做的叁个甩卖,貌似是为了以免万豆蔻梢头自动盗用流量吧

归纳的话,须求效法顾客手动去触发技能够

于是我们须要在最发轫调用那样日新月异段代码:

那是本身项目上的,作者就直接扣过来了

JavaScript

//修复ios 浏览器无法自动播放音频的难题 在加载时创立新的audio
用的时候改变src就能够 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser &&
Xut.plat.isIOS) { var is奥迪(Audi)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上绑定这样一个代码:通过手动触发创制三个audio对象,然后保留在全局中

在利用的时候如下

JavaScript

//假使为ios browser 用Xut.fix.audio 钦定src 早先化见app.js if
(Xut.fix.audio) { audio = Xut.fix.audio; audio.src = url; } else { audio
= new 奥迪(Audi)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不等

之所以必要有叁个方案能够减小图片

末尾的方案是使用录像替代动画,因为录制压缩手艺进步了比非常多年,已经不行高瞻远瞩了。现在录像压缩本事,能够相当的轻巧地将720P的

高清电影,压缩到10M/分钟,只怕160K/秒。比图像连串的文件尺寸,起码小了几十倍。同有的时候候,在于超越十分之五配备,都扶助对录像的

硬件解压缩,这样吧,摄像播放的CPU消耗极低,电瓶消耗也非常低,同期播放速度还快。固然25帧的全荧屏播放,也能随便地实

现。

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

  1. 整整录像,蕴涵摄像中的有些物体,可以响应客户的点击、滑动之类的操作
  2. 在One plus上边,能够在三个窗口中播放
  3. 能够过滤掉背景,进而能像PNG图像一样使用

最后的实效也是从头gif动画所示:

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

再就是也消除了,手动,自动,不全屏的主题素材

iphone窗口化

实施方案:

透过canvas + video标签结合管理

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

这里本人一向附上源码把,代码写的形似,可是突出了多少个第生机勃勃

1 赞 2 收藏 1
评论

图片 2

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

前段时间在钻探用录制取代动画,用录像代替精灵动画,大家称这种录制叫做交互录像。

价值观的机灵动画:

  1. 磁盘空间大,下载慢,尤其是在线播放,会更加慢
  2. 文件太多,在线播放的时候,太多http诉求,会变成响应慢,可能作为有失水准

所以,急需开辟了大器晚成套技艺,用录像取代Smart动画。大家称这种摄像叫做交互录制

历史观录像的标题:

  1. 价值观摄像,只好在方块形的区域中播放
  2. 思想的摄像,在三星平板下是窗口播放,在HTC下边,只好全屏播放
  3. 观念的摄像,播放的时候,一定会鬼使神差在最前端

相互录像具备如下特征:

  1. 在HTC下边,无需全屏播放,能够在一个区域中播放
  2. 交互录像能够出现在平常图形对象的上边
  3. 相互之间摄像能够满含蒙板,那样可以去掉录制的背景,让录制和平时图形对象融为蒸蒸日上体

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

其研商已经起来有收获了,顺便总括下几年活动H5开采中音频与录像遭受的实在难题及给出自个儿的缓和方案

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

消除了iphone上,手动、自动、窗口化等主题材料,基本能用于实际生育了

动手是原摄像DVD文件

侧面视频代替了动画片,然后扶助背景蒙板效果,能够透出底图,扶持意气风发多元的并行操作

图片 3

H5 audio音频

老是经过 new 奥迪o
叁个旋律对象,在IOS上能够看来会时有发生二个新的线程,这么些很恶心

建设方案:new
奥迪(Audi)o八个对象,通过轮换差别的旋律地址,达到异常少开线程的指标

在安卓上帮衬不给力

缓慢解决方案:低版本安卓上的标题没解,平时是混合开拓都以足以调底层接口管理的,举个例子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.在索尼爱立信上边,能够在贰个窗口中播放
3.能够过滤掉背景,进而能像PNG图像同样选拔

末尾的实际效果也是始于gif动画所示:

录像替代了动画,然后帮衬背景蒙板效果,能够透出底图

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

iphone窗口化

减轻方案:

经过canvas + video标签结合管理

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

此间作者一向附上源码把,代码写的相似,可是杰出了多少个根本

录像取代动画

那些有一些麻烦,须求做交互,拖动canvas达到调控图像的指标,近些日子本身还尚无任何写完,平时的信用合作社供给也不会有这些这里大致的叙述下,一样是canvas
+
video管理的,不过急需有一个缓存的canvas容器做二个预管理,通过预管理,获得每一张图的像素点,通过改动每四个像素点RBG的值,到达能够过滤掉背景,进而能像PNG图像同样使用,现在写好了,在颁发吧~~

以上就是本文的全部内容,希望对我们的就学抱有助于,也愿意大家多多指教帮客之家。

方今在商讨用摄像代替动画,用摄像替代Smart动画,大家称这种摄像叫做交互录制。…

活动端H5音频与录像难点及缓和方案

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

解决了,手动,自动,不全屏的主题素材

左侧摄像替代了动画,然后扶助背景蒙板效果,能够透出底图

动手是原录制文件

图片 1

H5 audio音频

  • 老是经过 new 奥迪(Audi)o
    叁个旋律对象,在IOS上能够见见会时有产生四个新的线程,这一个很恶心

斩草除根方案:

new 奥迪(Audi)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上绑定那样贰个代码:通过手动触发创造四个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也会有帮助难点

前阵子老董有个要求,我们选择动画太多了,都以敏感路径的构成卡通,三个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是多个概念摄像规格的国际团队,他们早已生产的MPEG-1和MPEG-2实际上分别正是豪门熟谙的mp4和mp4,可是那都以南陈的事物了。大家来拜望跟本文主题有关的MPEG-4规范。

MPEG-4标准规定了文本后缀名叫.VCD,最近富含两种图像编码和压缩算法: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曾在2012新春通告由于许可难题,将移除Chrome浏览器对AVC(H.264)的支持。不过直至当前的版本,AVC还在被辅助。别的,实际测验下来,如若是DivX和AAC封装在mp3中的话,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。

‡Google Chrome 二零一二年颁发 扬弃H.264, 不过“还没达成”。
能够看来以往主流的依旧是MP3(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)
提供一个VCD的摄像版本(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+VCD(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>