html5音频播放器,简要介绍html5中视频和音频的一些常见格式
本文概述
长期以来，音视频信息的获取一直是Web开发中的一个难点。多年来，我们一直依赖浏览器插件来满足这一需求。
在HTML 5中，有很多API可以访问硬件设备，比如GPS设备的地理定位API，加速度计设备的方位API，GPU设备的WebGL API，音频播放设备的Web Audio API等等。这些API非常强大，因为开发人员可以通过编写JavaSccript脚本代码直接访问底层硬件设备。
本文介绍了一个新的API，它使Web应用程序能够通过使用navigatior.getUserMedia()方法来访问用户的摄像头和麦克风设备。捕捉媒体数据的技术发展历史
在过去的几年中，在Web应用中访问客户端的本地设备的需求开始出现。因此，W3C决定组织一个DAP(Device API POLICY)工作组，为这一需求的实现制定统一的标准。
让我们来看看2011年发生了什么：
在HTML页面文件中捕获媒体数据
DAP工作组制定的第一个标准是如何在Web应用程序的HTML页面中捕获媒体数据。他们决定重载file类型的input元素(input type=file )，并向accept属性添加一个新的属性值。
如果开发者想实现用户通过摄像头拍照的功能，可以编写如下所示的代码。复制代码如下：
输入类型= file accept= image/*；“捕捉=相机”
录制视频数据和音频数据的代码类似：复制代码如下：
输入类型= file accept= video/*；“拍摄=摄像机”
输入类型= file accept= audio/*；“捕捉=麦克风”
在这些代码中，你只需要使用文件控件(file类型的input元素)就可以完成拍照或者记录媒体数据的功能。然而，这些代码并没有被开发人员广泛使用，因为它们仍然缺乏满足相关要求的能力(例如在canvas元素中渲染捕获的视频数据，或者对捕获的视频数据应用WEBGL过滤器)。
浏览器支持：
安卓3.0浏览器
安卓版Chrome浏览器(0.16)
火狐移动版10.0
元件设备
如果使用文件控制，捕获媒体数据和处理媒体数据的能力非常有限，因此出现了一种可以支持任何设备的新标准。该标准使用设备元素。
Opera browser是第一个通过设备元素捕获视频数据的浏览器。几乎在同一天，WhatWG组织决定使用navigator.getUserMedia()方法来捕获媒体数据。一周后，Opera推出了支持navigator.getUserMedia()方法的新浏览器。后来微软工具推出了支持这种方式的IE 9浏览器。
设备元素的用法如下。复制代码如下：
device type= media onchange= update(this . data)/device
视频自动播放/视频
脚本
功能更新(流){
document.querySelector(video )。src=stream.url
}
/script支持浏览器:
遗憾的是，到目前为止，还没有官方浏览器支持device元素。
实时通信
近年来，由于WebRTC(Web Real Time Communication)API的出现，媒体数据采集技术取得了很大的发展。谷歌、Opera、Mozilla和其他公司正试图在其浏览器中实现这一功能。
WebRTC API是一个与getUserMedia方法紧密相关的API，它提供了访问客户端本地摄像头或麦克风设备的能力。
浏览器支持：
到目前为止，在Chrome 18版浏览器中，在chrome://flags页面中设置后就可以使用WebRTC，而在Chrome 21版浏览器中，默认使用这个API，不需要设置。Opera 12和Firefox 17的浏览器默认支持WebRTC API。
使用getUserMedia方法
通过使用getUserMedia方法，我们可以直接访问客户端中的摄像头设备和麦克风设备，而不依赖于插件。检测浏览器支持
可以通过以下方法检查浏览器是否支持getUserMedia方法。复制代码如下：
函数hasGetUserMedia() {
//请注意：Opera浏览器中不使用前缀
回归！(navigator . getuser media navigator . WebKit getuser media
navigator . mozgetusermedia navigator . msgetusermedia)；
}
if (hasGetUserMedia()) {
Alert(“您的浏览器支持getUserMedia方法”)；
}
否则{
Alert(“您的浏览器不支持getUserMedia方法”)；
}获取访问设备的权限 为了访问客户端摄像头设备和麦克风设备，我们首先需要获得许可。getUserMedia方法的第一个参数是用于指定媒体类型的对象。例如，当您要访问摄像设备时，第一个参数应该是{video:true}。为了同时访问摄像头设备和麦克风设备，您需要使用{video:true，audio:true}参数。代码如下：复制代码如下：
视频自动播放id=视频/视频
脚本
var onFailSoHard=function() {
警报(“设备拒绝访问”)；
};
//不要使用供应商前缀
navigator . get user media({ video:true，audio: true}，function(localMediaStream) {
var video=document . getelementbyid( video )；
video.src=window。URL . createobjecturl(local media stream)；
//请注意：使用getUserMedia方法时，Chrome浏览器中不会触发onloadedmetadata事件。
video . onloadedmetadata=function(e){
//后面的代码省略。
};
}，onFailSoHard)；
/脚本
在这段代码中，使用了视频元素。请注意，我们没有使用video元素的src属性值，而是为video元素指定了引用媒体文件的URL地址，并将表示从摄像机获取的视频数据的LocalMediaStream对象转换为Blob URL。
在这段代码中，autoplay属性同时用于video元素。如果不使用该属性，视频元素将停留在获取的第一帧。
请注意：在Chrome浏览器中，如果只使用{audio:true}会引发BUG。在Opera浏览器中，音频元素也不能使用。
如果希望多个浏览器同时支持getUserMedia方法，请使用如下所示的代码：复制代码如下：
窗户。URL=窗口。URL window.webkitURL
navigator . getuser media=navigator . getuser media navigator . WebKit getuser media
navigator . mozgetusermedia navigator . msgetusermedia；
var video=document . getelementbyid( video )；
if (navigator.getUserMedia) {
navigator . getuser media({ audio:true，video: true}，function(stream) {
video.src=window。URL.createObjectURL(流)；
}，onFailSoHard)；
}
否则{
Alert(“您的浏览器不支持getUserMedia方法”)；
}安全性
在某些浏览器中，当调用getUserMedia方法时，会显示一个提示窗口，询问用户是允许还是拒绝访问他们的摄像头或麦克风。拍照
在Canvas API中，可以使用方法ctx.drawImage(video，0，0)将video元素中的一帧输出到Canvas元素中。当然，由于我们已经将用户摄像头拍摄的图像信息导出到了video元素中，我们也可以通过video元素将图像信息导出到canvas元素中，即实现实时拍照功能。代码如下所示。复制代码如下：
视频自动播放/视频
img src= id=img /img
canvas style= display:none；id=画布/canvas
var video=document . getelementbyid( video )；
var canvas=document . getelementbyid( canvas )；
var CTX=canvas . get context( 2d )；
var localMediaStream=null
函数快照(){
if (localMediaStream) {
ctx.drawImage(视频，0，0)；
document.getElementById(img )。src=canvas . toda taurl( image/png )；
}
}
video.addEventListener(click ，snapshot，false)；
//不要使用供应商前缀
navigator . get user media({ video:true }，function(stream) {
video.src=window。URL.createObjectURL(流)；
localMediaStream=stream
}，onFailSoHard)；应用CSS滤镜
目前为止，Chrome 18及以上版本的浏览器都可以使用CSS滤镜。
通过使用CSS滤镜，我们可以向video元素中捕获的视频添加各种图像滤镜效果。复制代码如下：
风格
#视频3 {
宽度：307px
高度：250px
背景：rgba(255，255，255，0.5)；
边框：1px纯色# ccc
}。灰度{
-WebKit-滤镜：灰度(1)；
}。棕褐色
-网络工具包-滤镜：棕褐色(1);
}。模糊
-WebKit-filter:blur(3px)；
}
.
/风格
视频id=视频自动播放/视频
脚本
var idx=0；
var过滤器=[灰度,棕褐色,模糊,亮度,对比度,色调-旋转，
hue-rotate2 ， hue-rotate3 ， saturate ， invert ， ]；
功能改变过滤器(e) {
var el=e.target
埃尔。类名=" "；
var effect=过滤器[idx %过滤器。长度]；//循环通过过滤器。
如果（效果){
el.classList.add(效果);
}
}
document.getElementById(video )。addEventListener(click ，changeFilter，false)；
/脚本
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。