1440人阅读
HTML5 Video（1）
HTML5 &Video &概论&&
<span style="color:# Video介绍
引用我翻译文档《在HTML5页面中嵌入音频和视频》中的介绍文字：「当今，在网页上嵌入视频且所有用户不管使用任何浏览器或者操作系统都能看到的唯一可靠方法是使用Flash。这需要Adobe
Flash插件，并且结合&object&和&embed&标签。
大多数用户已经安装了Flash插件（事实上，大概<span style="color:#%的上网用户都装有Flash的某个版本），但HTML
5的支持者正在推动一个开放的，不需要任何插件的视频标准。这就是HTML 5的新标签&video&带来的构想，他提供了一个嵌入视频（以及与其交互）而不需要类&#20284;Flash的私有插件的方法。
不幸的是，视频并非那么简单。不仅仅是浏览器需要理解&video&标签，而且需要一个必要的编码译码器来播放视频。明显的解决方法只能是HTML
5规范的缔造者们选择一个视频码译码器，并且让每一个浏览器制造商执行。
总之，这就是所推荐的打算。同时，这也是引起混乱的导火索。对于各种各样编码译码器的争论就已经很烦杂了，但更悲剧的事情是，浏览器制造商们还不能就此达成统一。苹果不愿意使用提议的Ogg Theora编码译码器，但Opera和Mozilla也不愿意支付由于他们的浏览器装载H.264编码译码器而造成的许可费用。Google同时支持两者，微软面对争论，远远的置身事外，因为他现在根本没有计划去支持HTML
5的视频元素。
面对浏览器制造商的僵持局面，HTML 5善意的独裁者Ian Hickson甩了甩他的手并说到去他妈的。所以HTML
5规范中没有特别指名或规定的视频编码译码器。」好吧，引用到这儿。
如今的情况是，微软终于陷进去了，但很悲剧的是，在IE 9中只支持H.264。同时，Googe终于在I/O大会上发布了开源的视频封装&#26684;式webM和视频编码&#26684;式VP8。Opera、Mozilla、
Chrome宣布将完全支持VP8，IE宣布部分支持（需要装一个插件，但如果我没记错的话，HTML5的一个愿景就是脱离浏览器插件，微软真是让人觉得悲剧）。
苹果决定不支持VP8，乔布斯认为VP8在质量或效率方面不如H.264，不能满足其产品的要求。另外最新消息表明VP8还有可能牵扯到专利的问题（如果真的侵犯专利的话，Opera和Firefox估计马上会无视VP8的）。
说了这么多，其实说到底就是，现在如果要在页面中使用&video&标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE
9、Chrome），都不支持的（IE6、<span style="color:#、<span style="color:#）。
好吧，现在让我们从技术层面来认识HTML 5的视频，包括&video&标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。
<span style="color:# Video标签的使用
Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性，以及一个内部使用的标签&source&。
Video卷标内除了可以包含&source&标签外，还可以包含当指定的视频都不能播放时，返回的内容。
<span style="color:#.1 src属性和poster属性
你能想象src属性是用来干啥的。跟&img&卷标的一样，这个属性用于指定视频的地址。
而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。
&2.2 preload属性
这个属性也能通过名字了解用处，此属性用于定义视频是否预加载。属性有三个可选择的&#20540;：none、metadata、auto。如果不使用此属性，默认为auto。
None：不进行预加载。使用此属性&#20540;，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。
Metadata：部分预加载。使用此属性&#20540;，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。
Auto：全部预加载。
&2.3 autoplay属性
又是一个看名字知道用处的属性。Autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。
注意，HTML中布尔属性的&#20540;不是true和false。正确的用法是，在卷标中使用此属性表示true，此时属性要么没有&#20540;，要么其&#20540;恒等于他的名字（此处，自动播放为&videoautoplay
/&或者&videoautoplay=」autoplay」 /&）；而在卷标中不使用此属性表示false（此处不进行自动播放为&video/&）。
&2.4 loop属性
一目了然，loop属性用于指定视频是否循环播放，同样是一个布尔属性。
&2.5 controls属性
Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。
控制栏须包括播放暂停控制，播放进度控制，音量控制等等。
每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题，Firefox和Safari的Video不正常，所以这两个只能在网上找截图了。
&2.6 width属性和height属性
属于卷标的通用属性了，这个不用多说。
<span style="color:#.7 source标签
Source卷标用于给媒体（因为audio卷标同样可以包含此卷标，所以这儿用媒体，而不是视频）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体卷标没有使用src属性时使用。
浏览器按source卷标的顺序检测卷标指定的视频是否能够播放（可能是视频&#26684;式不支持，视频不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义，不能单独出现。
此卷标包含src、type、media三个属性。
src属性：用于指定媒体的地址，和video卷标的一样。
Type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体&#26684;式。具体的属性&#20540;，请参见。
Media属性：用于说明媒体在何种媒介中使用，不设置时默认&#20540;为all，表示支持所有媒介。你想到&style&标签的media属性了么？一样一样一样的。
&2.8一个完整的例子
这段代码在页面中定义了一个视频，此视频的预览图为poster的属性&#20540;，显示浏览器的默认媒体控制栏，预加载视频的元数据，循环播放，宽度为
900像素，高度为<span style="color:#0像素。
第一选择视频地址为第一个source卷标的src属性&#20540;，视频类别为Ogg视频，视频编码译码器为Theora，音频编码译码器为Vorbis，播放媒介为显示器；第二选择视频地址不再累述。
如果你还要兼容IE的话，可以在最后一个source标签后再加上Flash播放器的标签集，或者使用一点JavaScript代码。具体可以查看篇文章。
<span style="color:#媒介属性
媒介属性包括error、currentsrc、networkState、preload、buffered、readyState、
seeking、currentTime、startTime、duration、paused、defaultPlaybackRate、
playbackRate、played、seekable、ended、autoplay、loop、controls、volume、muted等，可以用于返回或改变媒介的状态。
注意：以下使用到的「media」统一代表一个视频元素。如下图所示：
<span style="color:#.1 error属性
只读属性。使用media.error返回一个MediaError对象表明当前的错误状态，如果没有出错，返回null。
使用media.error.code返回媒介的错误状态，共有<span style="color:#个可能&#20540;。
MEDIA_ERR_ABORTED（数字&#20540;为<span style="color:#）：媒体资源获取异常；
MEDIA_ERR_NETWORK（数字&#20540;为<span style="color:#）：网络错误；
MEDIA_ERR_DECODE（数字&#20540;为<span style="color:#）：媒体译码错误；
MEDIA_ERR_SRC_NOT_SUPPORTED（数字&#20540;为<span style="color:#）：视频&#26684;式被不支持。
<span style="color:#.2 currentSrc属性
只读属性。使用media.currentSrc返回该媒介卷标的src属性&#20540;。
<span style="color:#.3 networkState属性
只读属性。使用media.networkState返回媒介的网络状态，共有<span style="color:#个可能&#20540;。
NETWORK_EMPTY（数字&#20540;为<span style="color:#）：尚未初始化；
NETWORK_IDLE（数字&#20540;为<span style="color:#）：加载完成，网络空闲；
NETWORK_LOADING（数字&#20540;为<span style="color:#）：视频加载中；
NETWORK_NO_SOURCE（数字&#20540;为<span style="color:#）：加载失败。
<span style="color:#.4 preload属性
可擦写属性。使用media.preload返回媒介卷标的preload属性&#20540;，或者对其进行赋&#20540;，改变媒介卷标的preload属性&#20540;。&
<span style="color:#.5 buffered属性
只读属性。使用media.buffered返回一个TimeRanges对象，确认浏览器已缓存媒介文件。
<span style="color:#.6 readyState属性
只读属性。使用media.readyState返回媒介当前播放位置的就绪状态，共有<span style="color:#个可能&#20540;。
HAVE_NOTHING（数字&#20540;为<span style="color:#）：当前播放位置无有效媒介资源；
HAVE_METADATA（数字&#20540;为<span style="color:#）：加载中，媒介资源确认存在，但当前位置没有能够加载到有效媒介数据进行播放；
HAVE_CURRENT_DATA（数字&#20540;为<span style="color:#）：已获取到当前播放数据，但没有足够的数据进行播放；
HAVE_FUTURE_DATA（数字&#20540;为<span style="color:#）：已获取到后续播放数据，可以进行播放；
HAVE_ENOUGH_DATA（数字&#20540;为<span style="color:#）：可以进行播放，且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放，而不会使浏览器的播放进度赶上加载数据的末端。
<span style="color:#.7 seeking、seekable属性
均为只读属性。
使用media.seeking返回一个布尔&#20540;，表明浏览器是否正在请求数据，ture表示浏览器正在请求数据，false表示浏览器已停止请求。
使用media.seekable发挥一个TimeRanges对象，表明可以对当前媒介资源进行请求。
<span style="color:#.8 currentTime、startTime、duration属性
三者的&#20540;均为时间，单位为秒，currentTime为可擦写属性，其余两个均为只读属性。
使用media.currentTime返回当前媒介的播放位置，或者对其赋&#20540;，改变媒介的播放位置。
对于使用media.currentTime的时候，如果返回的时间超出了浏览器的请求能力，将抛出一个INDEX_SIZE_ERR异常；如果没有选中的媒体资源，将抛出一个INVALID_STATE_ERR异常。
使用media.startTime返回媒介文件播放的开始时间，通常为<span style="color:#。
使用media.duration返回媒介文件总的播放时长。
<span style="color:#.9 played、paused、ended属性
三者均为只读属性。
使用media. played返回一个TimeRanges对象，标明浏览器已播放的媒介资源范围。
使用media.paused返回一个布尔&#20540;，表明媒介是否暂停播放，ture表示媒介暂停播放，false表示媒介正在播放。
使用media.ended返回一个布尔&#20540;，表明媒介是否已结束，ture表示媒介已经播放完毕，false表示还未播放完毕。
<span style="color:#.10 defaultPlaybackRate、playbackRate属性
两者均为可擦写属性。
使用media.defaultPlaybackRate返回媒介默认的播放速率，或对其赋&#20540;，改变媒介的默认播放速率。
使用media.playbackRate返回当前的媒介播放速率，或对其赋&#20540;，改变当前的媒介播放速率。
<span style="color:#.11 autoplay、loop属性
两者均为可擦写属性。
使用media.autoplay返回一个布尔&#20540;，表明当前媒介是否设置了自动播放，ture表示当前媒介为自动播放，false表示非自动播放，或对其赋&#20540;，设置是否自动播放。
使用media.loop返回一个布尔&#20540;，表明当前媒介是否设置了循环播放，ture表示当前媒介设置了循环播放，false表示没有设置循环播放，或对其赋&#20540;，设置是否循环播放。
<span style="color:#.12 controls、volume、muted属性
三者均为可擦写属性。
使用media.controls返回一个布尔&#20540;，表明当前媒介是否使用了浏览器默认的播放控制栏，ture表示加载了，false表示没有加载，或对其赋&#20540;，设置是否使用浏览器默认的播放控制栏。
使用media.volume返回当前媒介的音量&#20540;，或对其赋&#20540;，改变媒介的播放音量，范围为<span style="color:#到<span style="color:#，<span style="color:#相当于静音，<span style="color:#为最大音量。
使用media.muted返回一个布尔&#20540;，表明当前媒介播放是否开启静音，ture表示没有开启静音，false表示静音，或对其赋&#20540;，设置播放是否静音。
<span style="color:#媒介方法
<span style="color:#.1 play()、pause()、load()方法
使用media.play()播放视频，并会将media.paused的&#20540;强行设为false。
使用media.pause()暂停视频，并会将media.paused的&#20540;强行设为ture。
使用media.load()重载视频，并会将media.playbackRate的&#20540;强行设为
media.defaultPlaybackRate的&#20540;，且强行将media.error的&#20540;设为null。
<span style="color:#.2 canPlayType(type)方法
使用canPlayType(type)方法测试浏览器是否支持特定的媒介类型。其中，type参数和<span style="color:#.1.7节中介绍的type属性是相同的。
方法返回<span style="color:#个可能&#20540;（均为浏览器判断的结果）。
空字符串：浏览器不支持此种媒体类型；
maybe：浏览器可能支持此种媒体类型；
probably：浏览器确定支持此种媒体类型。
<span style="color:#媒介事件
媒介事件可以作用于各种媒介元素，如视频、音频、图片等，主要包括loadstart、progress、suspend、abort、
error、emptied、stalled、play、pause、loadedmetadata、loadeddata、waiting、
playing、canplay、canplaythrough、seeking、seeked、timeupdate、ended、
ratechange、durationchange、volumechange等事件。
<span style="color:#.1事件处理方式
一般有两种方式处理事件。
一种是监听的方式：addEventListener(「事件名」,处理函数,处理方式)。例如，如果需要在浏览器对媒介进行播放时执行begin_playing函数，那么可以这样，media.addEventListener(「play」,
begin_playing,false)。
另一种是直接赋&#20540;的方式：on时间名=处理函数，这是我们相对用的较多的方法，也就是「当XXX事件触发时」。例如，要进行和上面相同的处理，可以这样media.onplay=
begin_playing。
<span style="color:#.2事件介绍
<span style="color:# Video完结
W3C网站上有一个关于HTML 5视频的举例，很好的说明了所有前面介绍的卷标的使用，属性和方法以及事件的应用，非常直观。随便还可以通过这个页面查看浏览器对HTML
5视频各个方面的支持情况。
文档的第一章，关于HTML 5视频的相关知识背景和技术规范就差不多介绍完了，整章的内容不是文字就是代码，有图也几乎是代码截图。后续还会有第二章、第三章……HTML
5引入了很多强大的新内容，我们有很多东西需要去学
原文链接：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：163886次
积分：1831
积分：1831
排名：第15152名
转载：122篇
评论：15条
(1)(2)(17)(21)(3)(10)(5)(37)(30)HTML 5 Video 的未来 - 开源中国社区
当前访客身份：游客 [
当前位置：
HTML 5 Video 的未来
HTML5 video的世界里，将来会发生什么？Opera公司的Bruce Lawson为您揭示那些即将上架的新鲜货，并指导您如何把这些新特性应用到您的站点上。
这篇文章最早是在.net杂志的上刊登
HTML5把本地多媒体引入到浏览器中。在过去，音视频需要通过第三方插件来处理（这样引发的问题是：并不是所有操作系统或者设备都能使用）流览器与插件之间的通信被局限住了，而且多媒体就像一个黑盒子。
HTML5出现之后，所有主流浏览器都可以支持本地音视频了（包括IE浏览器），虽然这个过程需要让您的媒体文件进行双份的编码（因为IE 和Safari只支持Royalty-encumbered标准的编码）。有了HTML5，突然之间，video可以跟CSS一起排样式了：您可以用半透 明的视频相互覆盖，设置边界与背景图片，旋转盘旋等变换，以及其他各种精彩的变形应用。
如果您看过这篇，您将也会知道音视频拥有简单的API使您可以用JavaScript来控制播放。根据需求的简单或复杂，您可以使用一些简单的JavaScript和CSS做出自己的媒体播放器。
我们现在发展到什么程度了？
现在本地的多媒体已经看起来十分炫酷了，当然也不是足够的成熟，毕竟使用浏览器作为媒体播放器也不过两年时间。与此相对应的桌面媒体播放器程序已经存在了15年，在这么多年的锤炼中不断完善。
很多人注意到了，大多数浏览器在播放音频的时候有少许的延迟。许多游戏开发者经常说，FLASH技术残留下来就是为他们提供声音的，正如许多浏览器可以需要两秒钟来加载HTML5音频文件。Patrick Lauke写了一篇文档《》
Remy Sharp在文章中描述了一种他称为的技术来克服iOS的缺陷。而在iOS领域另外两篇必读的文献是和
当然，这些是一些实现细节，而不是规范文档的问题，所以随着平台的逐步发展成熟，这些问题将会逐渐消失的。
所以，目前的情况就是这样了，让我们看看将来会发生一些什么。
多媒体的字幕和标题问题
随着网络的发展，web的内容越来越多的是用音视频的形式来体现了，考虑一下有些用户无法听到音轨，或者其母语并不是英语的情况，抑或用户希望用他们自己的语言来阅读字幕和内容的时候。
在你的标题和子标题附近很快就会出现了，通过HTML5&track&元素，可以基于时间轴对媒体文件同步字幕。这个强有力的元素是&video&或者&audio&元素的子类，并指向一个副标题文件。让我们来看看它的一些属性吧：
&track&src=subtitles.vtt kind=subtitles srclang=en&label=”English”&
Src属性指向了外部的基于时间的文本track，这种属性可以告诉浏览器是否存在subtitle属性（这种对话，需要事先转录或者翻译好否则不 易理解），Caption属性（对话的翻译，声音效果，音乐提示等相关音频信息，特别适合有些时候声音不清晰的情况），Description属性（对媒 体资源视频组件的文字画描述，目的是当视觉组件不好用的时候音频同步方便，例如没有屏幕的应用场景，或者用户视力有障碍），以及Chapter属性和 Metadata属性。默认设置是Subtitle。
Srclang属性告诉浏览器文本文件是什么语言，并且能帮助您与多个音视频集进行关联：这样您就可以提供很多中语言的副标题了。Lable属性是可选的，是一个为track提供的用户可读的标题。
&video controls&
&&source&src=movie.mp4&type=video/mp4&
&&source&src=movie.webm&type=video/webm&
&&track&type=subtitles srclang=en&src=subtitles-en.vtt&
&&track&type=subtitles srclang=de&src=subtitles-de.vtt&label=”German”&
& &&!– fall back content, eg a Flash movie or YouTube embed code
在规范文档中并没有对浏览器如何与基于时间的文本文件通信上作出要求，也没有说明浏览器该如何支持它，但是我们可以用Polyfill进行实验。
为了使用快速原型方法，作者喜欢使用Playr，一个由编写的轻量级的脚本，可以从上面获得。您只需要抓些图片来装扮Playr UI，加入playr.js和Playr.css在您的页面的Head里面，把类名playr_video加入你的Video tag里面，然后你的页面就会被漂亮的Playr的皮肤补偿了，还拥有在副标题中选择的功能。
需要注意的是，UI是用Polyfill做的，目前还没有被嵌入任何浏览器（但将来会的），Opera，微软和谷歌对它都有贡献；而且很有可能其他浏览器会提供类似的UI和功能。
&track&元素并没有为基于时间轴的文本指定什么特定的格式。在这样的情况下，它是一个webVTT文件，但 是&track&像&img&&video&&audio&一样一样是格式不可知的。所有浏览器都将支 持新版本的webVTT格式，微软已经声称还将支持一种比较老的叫做TTML的格式。
webVTT是一个全新的基于时间的文本格式。网页上已经充斥着最少五十种其他格式了，那么为什么还要引入一个新的格式呢？因为大家需要一种简单的格式来完成诸多强大的功能。
作者认为webVTT十分的简单，这一点很重要：如果太难了，作者就不愿意理睬了；而且如果没有副标题的视频存在，也就没有浏览器会支持新的元素和API来让多媒体内容访问了。简单地来描述，WebVTT的代码看起来就是这样的：
WEBVTT 00:01.000 –& 00:02.000  Hello 00:03.000 –& 00:05.000 World
这是一个简单的UTF-8编码的文本文件，需要在顶部指明webVTT，时间被指明为从媒体开始的偏移量。所以HELLO会在视频开始1秒时出现，持续1秒到2秒时就消失了，副标题也会从开始算三秒后消失，这时WORLD字样就会出现了。
实在是没法再简单了，当然您可以做得更复杂一些，例如您可以改变副标题的位置，像这样：
00:03.000 –& 00:05.000 L:-85%
这样就把副标题的位置提升到85%的位置了，默认位置是视频的底部。
您也可以改变文本的尺寸，例如& S:150% 这样的语句就可以把默认的尺寸放大。另外，也可以让副标题渐渐出现（就像卡拉OK的歌词字幕那样，前面的消失了后面的才会出现）；您也可以定义样式，使得 不同的样式或扬声器的字体颜色各不相同。这方面如果您想了解细节，请访问这个链接看看。
比这些样式选项更重要的是拥有一些更加国际化的选项。webVTT规范内嵌了从右到左的显示顺序来支持阿拉伯和希伯来人的阅读习惯，还可以为了中文进行从上到下的显示，还增加了Ruby注释的功能：例如可以为中文，日文，韩文等音标加注释。
如果您也想实验一下webVTT，就用Playr写写试试吧，Opera的Anne van Kesteren写了一个可以测试你的作品。
大家都喜欢全屏看视频，所以都期待着HTML5规范说明符（虽然在此之前很久都不允许这样）。Webkit实现了自己的JavaScript方法， 名称是WebkitEnterFullscreen() 并且实现了API，只能由用户初始化Action时触发：例如弹出窗口等，除非用户点确认按钮等才可以运行。
在2011年的五月，Webkit宣布它会， 该API可以允许任何元素全屏（并不仅仅是video了）您或许需要全屏的&canvas&游戏或者视频小工具等通 过&iframe&嵌入页面，脚本还可以让字幕键盘输入在全屏模式下运行，这意味着你可以创造你的超级出色的平台游戏了，通过使用 canvas API它可以全屏运行还有全键盘支持。
Opera也很喜欢这个方法，我们可以看到一些增强互操作性的进展，到那时候，我们将可以通过全窗口的方式来伪实现全屏，设置视频的尺寸来适应窗口的尺寸。
同步媒体元素
同步媒体元素的功能仍在被逐步规范中，所以相对于同步标题和副标题而言，距离实现还有有些遥远：将来会允许一些相关的媒体元素（音频，视频或者混合）被链接起来。
同步媒体元素目前有两个主要的用例。您可以想象一下某个站点正在播放体育新闻的视频，是许多视频元素拼接起来的，每个视频都是从不同角度的摄像机捕 获：例如某一个进球的Replay可以从多个角度，追踪球或者球员播放；您也可以想象一个站点正在直播某音乐会，一个镜头给贝斯手，一个镜头给吉他手，一 个镜头拍秘鲁长笛。您移动进度条或者改变播放速率来慢播，对一个视频镜头的操作可以影响其他视频。另一个典型用例是访问性。track元素让我们能够为视 频同步文本字幕，这样的同步功能让我们也可以同步另一个视频或者利用对话的间隙同步某个音轨。
虽然已经拥有了一个完整的API控制器，但是最简单得同步媒体元素的方法还是在video或audio元素上声明并使用mediagroup属性。为mediagroup赋值相同即可完成多个元素的同步了，代码像这样：
&&video mediagroup=”jedward”&src=”bass-guitar.webm”&..&/video&
&&video mediagroup=”jedward”&src=”lead-guitar.webm”&..&/video&
&&video mediagroup=”jedward”&src=”idiot-1.webm”&..&/video&
&&video mediagroup=”jedward”&src=”idiot-2.webm”&..&/video&
这样的大块标记可以同步四个摄像机，在Jedward音乐会上分别拍摄不同的音乐家的演出；而下面的同步音频描述方式，在流行的电影Mankini Magic中使用了。
&video mediagroup=”described-film”&
& &src=”mankini-magic.webm”&..&/video&
&&audio mediagroup=”described-film”&src=”describe.ogg”&..&/audio&
这种方式依然在被规范的阶段，所以据目前作者所知，还没有什么浏览器支持，也没有polyfill。
访问摄像头和麦克风
还有一小部分插件的应用残留了下来，因为HTML5目前还不能完成媒体内容的版权保护，DRM插件就是其中之一。另一个插件是自适应流，可以根据网络情况改变比特率。
针对传统的FLASH插件领域，HTML5现在加入了一些便利的方法来连接用户设备的摄像头和麦克风。就像大家之前知道的 HTML5&device&元素，这个功能现在封装在一个叫做getUserMedia的API中，它可以告诉设备我们希望得到什么格式的媒 体，我们只需要传递audio和video的参数。由于很多设备具有前置摄像头来拍摄用户的画面，还有个后置摄像头，我们需要传递用户标记或者环境。
首先我们进行特征检测：
&if(navigator.getUserMedia) {
&navigator.getUserMedia(‘audio, video user’, successCallback,
&&&errorCallback);
当我们有了流媒体，我们可以在需要的使用就用上了。在这里，作者只是简单地利用了页面上挂载的流媒体资源的链接。
var video = document.getElementsByTagName(&video&)[0]
&function successCallback( stream ) {
&video.src =
一旦有了这个，从canvas元素中拷贝出视频就容易了，使用drawImage来捕获当前视频的帧，然后每隔67毫秒重画一次（大约是每秒15帧）；一旦把它放进了canvas，您就可以通过getImageData来访问像素了。
Opera公司的Richard Tibbett做了一个，在canvas中使用JavaScript来进行人脸识别———还是实时的！当发现人脸的时候，还能在相应的位置上画一个魔幻HTML5胡须。
getUserMedia在Opera 12，Opera Mobile12和Chrome金丝雀版本中都支持，大量的范例您可以点击这个链接来查看。
显然，允许网络站点接入您的网络摄像头可能会引发隐私相关的内容，所以用户可以选择式加入，就好像现在的地理位置应用一样。这是一个UI关注的问题，而不是技术方面的问题。
当然，很有可能getUserMedia API的设计者除了画胡须之外有很多别的应用在考虑，例如可以做出基于浏览器的QR/条形码扫描器，或者更准确的说，增强现实。HTML5工作组目前正在 定义一个P2P 的API规范，这个API可以让您把自己的摄像头和麦克风连接到&video&和&audio&元素到其他人的浏览器中，这样做 视频会议都没问题了。
2011年5月，谷歌发布了WebRTC，是一个基于HTML5规范的针对web上面音视频的开源技术。它是一个针对“实时通信”和浏览器中应用视 频会议的RTC标准，可以链接你的摄像头与麦克风到一个web页面与好友进行互动（这个技术是建立在HTML5 PeerConnection API之上的）。
使用VP8（WebM中 的视频编解码）和两个音频解码优化来实现会话中的噪声以及回响等的消除，这个叫做iLBC，是一个窄频带声音编解码；此外还有个iSAC，宽频带自适应编 解码器。正如其项目网站上说的那样：“我们很期待看到WebRTC技术将在Firefox，Opera和Chrome中实现！”
正如您所看到的那样，HTML5对于多媒体的支持更加地丰富了。正如我们平时对待HTML5那样，实现方案需要跟上规范定义的改变而与时俱进，规范也需要进一步完成~未来确实让人又兴奋又期待！
想通过手机客户端（支持 Android、iPhone 和 Windows Phone）访问开源中国：
旧一篇： 4年前
新一篇： 4年前
你也许会喜欢
什么时候能成标准？
2楼：barachel
3楼：xesam
4楼：Guoyao
5楼：Bairrfhoinn
流览器？浏览器？很多中语言？很多种语言？
6楼：剑胆琴心
HTML5的未来很艰难，标准制定者各怀鬼胎。
7楼：loki_lan
基于浏览的条形码扫描器
这个关注好几年了....
引用来自“barachel”的评论遥遥无期+1
与内容无关的评论将被删除，严重者禁用帐号
本周热点资讯
本站最新资讯}