首页登陆欢迎您!
首页登陆 > 前端 > HTML5的在线视频播放方案

HTML5的在线视频播放方案

时间:2019-12-12

移动端H5音频与录制难题及缓和方案

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

原稿出处: 官网平台 ,Aaron的博客   

如今在切磋用摄像取代动漫,已经发轫有收获了,顺便总括下几年开荒中遭遇的骨子里难点及给出本人的化解方案

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

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

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

左边手是原录像文件

官网平台 1

H5 audio音频

  • 历次通过 new 奥迪(Audi卡塔尔(قطر‎o 八个节奏对象,在IOS上得以看出会时有产生三个新的线程,那些很恶心

实施方案:

new 奥迪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(卡塔尔(英语:State of Qatar) { 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 奥迪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. 在中兴上面,能够在一个窗口中播放
  3. 可以预知过滤掉背景,进而能像PNG图像雷同选拔

终极的实效也是从头gif动漫所示:

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

再正是也解决了,手动,自动,不全屏的主题材料

iphone窗口化

缓和方案:

经过canvas + video标签结合管理

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

此地作者一直依附源码把,代码写的相同,可是卓越了多少个基本点

1 赞 2 收藏 1 评论

官网平台 2

精解移动端HTML5音频与录制难点及解决方案,html5音频

多年来在研究用摄像代替动漫,用摄像取代Smart动漫,我们称这种摄像叫做交互作用摄像。

古板的敏锐性动漫:

  1. 磁盘空间大,下载慢,非常是在线播放,会更加慢
  2. 文件太多,在线播放的时候,太多http央求,会诱致响应慢,可能作为失常

为此,急需开拓了黄金年代套手艺,用录制替代精灵动漫。大家称这种录像叫做交互录像

思想录制的难点:

  1. 历史观录像,只好在方块形的区域中播放
  2. 守旧的录像,在三星平板下是窗口播放,在小米上边,只可以全屏播放
  3. 人生观的录制,播放的时候,一定会出未来最前端

互相之间摄像具犹如下特点:

  1. 在诺基亚上边,没有要求全屏播放,能够在二个区域中播放
  2. 彼此之间视频能够出以后普通图形对象的上面
  3. 相互视频可以包罗蒙板,那样能够去掉摄像的背景,让摄像和普通图形对象融为朝气蓬勃体

 总结:仅仅播放用的摄像,大家就将其设置为守旧录制。而急需用于特定用场的录像,我们就将其安装为互相视频。

其斟酌已经开始有成果了,顺便总括下几年活动H5开拓中音频与摄像境遇的骨子里难点及给出本人的缓慢解决方案

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

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

侧面是原摄像VCD文件

右边摄像代替了动漫片,然后帮助背景蒙板效果,能够透出底图,支持一文山会海的互相操作

官网平台 3

H5 audio音频

老是经过 new 奥迪(Audi卡塔尔(قطر‎o 一个节奏对象,在IOS上能够看来会时有发生叁个新的线程,这些很恶心

建设方案:new 奥迪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也可能有支撑难点

前阵子总CEO有个必要,大家应用动漫太多了,都是灵动路径的构成卡通,二个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动漫,大家称这种录制叫做人机联作录像。...

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

今昔在这里个特殊的有的时候下:flash将死未死,微细软IE的历史主题素材,html5标准未定,苹果和谷歌(Google卡塔尔(قطر‎的闭源和开源之争,移动互连网的必定,浏览器政出多门…这几个都形成web开拓者在希图录制施工方案的时候一定郁结。本文围绕那个主旨,来索求一下有关的技巧,原理和工具。

编码与格式的误区 不少人将编码和格式误以为是同一个事物,往往以录制文件的后缀来唯后生可畏鲜明摄像文件的支撑程度。而实质上,用一句话来归纳正是:录像的公文后缀(若是未有恶意纠正后缀)实际上意味着后生可畏种封装格式,而摄像恐怕音频的编码算法与封装格式自个儿无一贯的关系:同样的封装格式(即风流浪漫律的后缀)能够打包差异编码算法的录制和节奏。而摄像播放设备或软件是还是不是援救录制的播音,不仅要看封装格式,还要看编码算法。认清那一点是了然和每种核实难题的底蕴。

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

从MPEG说起 MPEG是多少个概念录像规格的国际公司,他们早就分娩的MPEG-1和MPEG-2实际上分别便是贵胄熟练的DVD和DVD,然而那都以清朝的事物了。大家来探视跟本文核心有关的MPEG-4标准。

MPEG-4标准规定了文本后缀名称叫.VCD,近日席卷三种图像编码和压缩算法:XvidDivXAVC(H.264卡塔尔(英语:State of Qatar),此中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卡塔尔(英语:State of Qatar)。
Firefox和Opera:依然出于许可的难点,Firefox和Opera逐步动摇了对AVC的扶助,笔者在风靡的Firefox中测量检验AVC仍旧能够播放(维基百科的解释是可能与系统自己具有解码器有关);至于DivX和Xvid,小编在Firefox下的测验结果是不扶持。从维基百科的合作列表看,Opera对AVC协理的糟糕。
IE:作者的IE11力所能及帮助AVC,不扶持DivX和Xvid
WebM的倡导
鉴于AVC(H.264卡塔尔(英语:State of Qatar)的授权难点,以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相同,开源,被广泛的在开源平台支撑。其摄像编码方案称为Theora(有VP3发展而来,由Xiph.org基金会开拓,可被用于其余封装格式卡塔尔国,音频为Vorbis。后缀平常为.ogv或.ogg,MIME类型为video/ogg。在包容性上,Chrome、Firefox、Opera能够帮助(但是Opera在活动平台上不能够支撑),然则Safari和IE大约不能支撑。

Html5方案 上述的座谈实际上的大前提是:录像基于Html5的<video>方案。今后我们来计算一下兼容性:
官网平台 4

*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)
提供一个MP5的摄像版本(H.264+AAC(low complexity卡塔尔)
提供Ogg版本(Theora+Vorbis)
服务端推荐应用nginx,尽量注意MIME类型的配备不错

旧版本的IE和flash 在html5盛行从前,通用的摄像播放应用方案是flash和flv(flash从9开始帮忙h.264的mp5)。然而随着ios设备的流行,flash已经不是万能药了,愈来愈多的录制网址提供系列的消除方案,何况偏侧于html5:也正是说,通过检查实验agent是还是不是协助html5来调控使用video还是flash。在直面IE8以下的浏览器时,flash差不离是无可比拟的选项(silverlight的选拔度分布不高卡塔尔。

本来针对flash和flv的方案,也会有五种贯彻格局,笔者能够想到的有如下三种:

服务端依据agent的类别,输出不一样的html,倘使扶助html5就输出video+DVD(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>  

 

 

 

poster属性可用于钦命叁个图像在摄像起头广播前显示。

运作代码

复制代码

另存代码

提醒:能够先校正部分代码后再运营上边代码

API提供了部分方法和事件让脚本决定媒体的播音。最简便的办法来利用 play(卡塔尔(英语:State of Qatar), pause(卡塔尔、设置 currentTime 播放的日子。

官网平台 5

福衢寿车代码:

<video id="video" src="mov.mp4" controls width="300" height="240"  autoplay>
</video> 
<script>
var video = document.getElementById("video");
</script>
<p>
<button type="button" onclick="video.play();">播放</button>
<button type="button" onclick="video.pause();">‖暂停</button>
<button type="button" onclick="video.currentTime = 0;">》回放</button>

运营代码

复制代码

另存代码

 

 

 

 

 

 

 

上一篇:调用ffmpeg SDK对YUV视频序列进行编码 下一篇:没有了