HTML5新增了许多重要的特性，像视频、音频和帆布等等，这些特性使得能够很容易的网页中包含多媒体内容，而不需要任何的插件或者美国石油学会。而其它的新元素，例如章节、文章、标题和航行等则是用来丰富网页内容。另外还有很多强大的JavaScript API，下面这5个HTML5 API你可能不知道，通过今天这篇文章可以了解一下。

Fullscreen API

这个HTML5全屏应用程序接口让网开发者可以通过编程控制页面的全屏显示。这个应用程序接口对于Java脚本语言游戏开发特别有用，例如这款单人射击游戏BananaBread，在全屏状态下玩那是相当酷。

[backcolor=rgb(248，248，248)！重要]1

2

[backcolor=rgb(248，248，248)！重要]3

四

[backcolor=rgb(248，248，248)！重要]5

6

[backcolor=rgb(248，248，248)！重要]7

8

[backcolor=rgb(248，248，248)！重要]9

10

[backcolor=rgb(248，248，248)！重要]11

12

[backcolor=rgb(248，248，248)！重要]13

14

[backcolor=rgb(248，248，248)！重要]//根据目标元素调用相应的方法

函数启动全屏(元素){

[backcolor=rgb(248，248，248)！重要]if(元素。RequestFullscreen){

元素。request full screen()；

[backcolor=rgb(248，248，248)！重要]} else if(元素。MozRequestFullscreen){

元素。MozRequestFullscreen()；

[backcolor=rgb(248，248，248)！重要]} else if(元素。WebKittrequestfull全屏){

元素。webkitrequestfull screen()；

[backcolor=rgb(248，248，248)！重要] }

}

//在支持的浏览器中启动全屏

[backcolor=rgb(248，248，248)！重要]启动全屏(文档。文档元素)；//整个页面

全屏启动(文档。getelementbyid(' video element ')；//单个元素

使用教程在线演示

Page Visibility API

页面可见性应用编程接口可以帮助开发者监听用户的焦点在哪个页面选项卡上面以及用户在选项库或者窗口之间的移动情况。如果使用合理的话，当焦点不在某个页面上的时候可以停止一些消耗很大的任务。

[size=1em]

[color=rgb(255，255，255)！重要】?

[backcolor=rgb(248，248，248)！重要]1

2

[backcolor=rgb(248，248，248)！重要]3

四

[backcolor=rgb(248，248，248)！重要]5

6

[backcolor=rgb(248，248，248)！重要]7

8

[backcolor=rgb(248，248，248)！重要]9

10

[backcolor=rgb(248，248，248)！重要]11

12

[backcolor=rgb(248，248，248)！重要]13

14

[backcolor=rgb(248，248，248)！重要]15

16

[backcolor=rgb(248，248，248)！重要]17

18

[backcolor=rgb(248，248，248)！重要]19

20

[backcolor=rgb(248，248，248)！重要]21

22

[backcolor=rgb(248，248，248)！重要]23

24

[backcolor=rgb(248，248，248)！重要]25

[backcolor=rgb(248，248，248)！重要]//部分浏览器只支持供应商前缀

//根据浏览器支持情况设置隐藏属性和可见状态改变事件

[backcolor=rgb(248，248，248)！重要]变量隐藏、状态、可见性变化；

if (typeof document.hidden！=='undefined') {

[backcolor=rgb(248，248，248)！重要]隐藏='隐藏；

visibility ChanGe=' visibility ChanGe '；

[backcolor=rgb(248，248，248)！重要]状态=' visibilityState

} else if(文档。蚊子。=='undefined') {

[backcolor=rgb(248，248，248)！重要]hidden=' mozhidden '；

可见度变化=' mozzvisibility change

[backcolor=rgb(248，248，248)！重要]状态=' mozVisibilityState

} else if(文档类型。MsHided！=='undefined') {

[backcolor=rgb(248，248，248)！重要]hidden=' MsHided '；

可见性更改=' ms visibility ChanGe

[backcolor=rgb(248，248，248)！重要]状态=' msVisibilityState

} else if(文档。WebKit隐藏！=='undefined') {

[backcolor=rgb(248，248，248)！重要]hidden=' WebKitHided '；

visibility ChanGe=' webkitvisibility ChanGe '；

[backcolor=rgb(248，248，248)！重要]状态=' webkitVisibilityState

}

//添加一个时间来实时改变页面的标题

[backcolor=rgb(248，248，248)！重要]文档。add event listener(visibilityChange，function(e) {

//根据状态启动或停止处理

[backcolor=rgb(248，248，248)！重要]}，false)；

使用教程在线演示

Supporting visibilityChange in MooTools

MooTools不支持可视化，所以您需要添加这部分JavaScript 3:

//设置！元素本机事件[VisibilityChange]=2；元素events[visibility ChanGe]={ base : visibility ChanGe，condition : function(event){ event[state]=document[state]；事件。可见性状态=文档[状态]；返回true } }//现在就用！文件。addevent(visibilityChange)，function(e){ document。title=文档[状态]；});

你不喜欢这么简单的事情吗？这反映了将消息事件添加到支持的事件列表中所需的代码。

getUserMedia API

特别有趣的一个API，能够调用电脑的摄像头，结合录像标签和帆布就能在浏览器中拍摄照片了。未来这个应用程序接口将被广泛用来让浏览器和用户之间互动。

[size=1em]

[color=rgb(255，255，255)！重要】?

[backcolor=rgb(248，248，248)！重要]1

2

[backcolor=rgb(248，248，248)！重要]3

四

[backcolor=rgb(248，248，248)！重要]5

6

[backcolor=rgb(248，248，248)！重要]7

8

[backcolor=rgb(248，248，248)！重要]9

10

[backcolor=rgb(248，248，248)！重要]11

12

[backcolor=rgb(248，248，248)！重要]13

14

[backcolor=rgb(248，248，248)！重要]15

16

[backcolor=rgb(248，248，248)！重要]17

18

[backcolor=rgb(248，248，248)！重要]19

20

[backcolor=rgb(248，248，248)！重要]21

22

[backcolor=rgb(248，248，248)！重要]23

24

[backcolor=rgb(248，248，248)！重要]//添加事件监听器

窗户。add event listener(' DOmContentLoaded '，函数(){

[backcolor=rgb(248，248，248)！重要] //获取元素，创建配置

var canvas=文档。getelementbyid(' canvas ')，

[backcolor=rgb(248，248，248)！重要] context=canvas.getContext('2d ')，

视频=文档。getelementbyid('视频')，

[backcolor=rgb(248，248，248)！重要] videoObj={ 'video': true }，

errBack=函数（错误){

[backcolor=rgb(248，248，248)！重要]控制台。日志('视频捕获错误： '，错误。代码)；

};

//添加视频监听器

[backcolor=rgb(248，248，248)！重要] if(navigator.getUserMedia) { //标准的应用程序接口

领航员。GetUserMedia(VideoObj，函数(流){

[backcolor=rgb(248，248，248)！重要]视频。src=stream

视频。play()；

[backcolor=rgb(248，248，248)！重要] }，errBack)；

} else if(导航器。WebKitGetUserMedia){//WebKit核心的应用程序接口

[backcolor=rgb(248，248，248)！重要]领航员。WebKitGetUserMedia(VideoObj，函数(流){

视频。src=窗口。WebKitURl。CreateObjectURl(流)；

[backcolor=rgb(248，248，248)！重要]视频。play()；

}，errBack)；

[backcolor=rgb(248，248，248)！重要] }

}，false)；

使用教程在线演示

Battery API

顾名思义，这是一个电池API，明显是为移动设备准备的，用于监控电池的状态。能够通过事件监听电池电量的变化，电池的等级、可用时间等状态。下面是是示例代码，可以通过后面的教程链接学习更详细的使用方法。

[size=1em]

[color=rgb(255，255，255)！重要】?

[backcolor=rgb(248，248，248)！重要]1

2

[backcolor=rgb(248，248，248)！重要]3

四

[backcolor=rgb(248，248，248)！重要]5

6

[backcolor=rgb(248，248，248)！重要]7

8

[backcolor=rgb(248，248，248)！重要]9

10

[backcolor=rgb(248，248，248)！重要]11

12

[backcolor=rgb(248，248，248)！重要]//获取电池对象

var battery=navigator。电池| |导航仪。WebKit电池| |导航仪。moz电池；

//一组非常有用的电池属性

[backcolor=rgb(248，248，248)！重要]控制台。“warn(”电池充电： ',电池。充电);//true

控制台。警告('电池电量： '，电池。级别)；//0.58

[backcolor=rgb(248，248，248)！重要]控制台。警告('电池放电时间： ',电池。放电时间);

[backcolor=rgb(248，248，248)！重要]//监听电池状态

电池。add event listener(' charging change '，function(e) {

[backcolor=rgb(248，248，248)！重要]控制台。警告('电池充电更换： ',电池。充电);

}，false)；

使用教程

Link Prefetching

这个链接预取应用程序接口非常有用，让开发者可以控制网页资源在后台安静的预先加载，这样用户在浏览网站或者使用网应用程序的时候能够有流畅的使用体验。可以预加载整个页面，也可以是单个资源，示例代码如下：

[size=1em]

[color=rgb(255，255，255)！重要】?

[backcolor=rgb(248，248，248)！重要]1

2

[backcolor=rgb(248，248，248)！重要]3

四

[backcolor=rgb(248，248，248)！重要]5

[backcolor=rgb(248，248，248)！重要]!-预加载整个页面-

link rel=' prefetch ' href='[color=blue！重要]http://davidwalsh . name/CSS-增强功能-用户体验'/

[backcolor=rgb(248，248，248)！重要]

！-预加载图片-

[backcolor=rgb(248，248，248)！重要]link rel=' prefetch ' href='[color=blue！重要]http://davidwalsh . name/WP-content/themes/Walsh book 3/images/sprite . png '/

使用教程

以上五个HTML5 API值得关注，而且在不久的将来会得到广泛的应用，所以早点掌握它们可以帮助你为构建的Web应用打下坚实的基础。通过使用教程，可以快速熟悉这些API的基本用法和使用场景，提供的在线演示展示了直观的应用。