什么是API?HTML5的API是什么?能通俗易懂点的?不要复制

应用程序接口，开发程序的时候我们需要调用api，为什么需要调用api呢？因为很多系统的 *** 作我们自己写程序是完成不了的，这就需要调用人家写好的方法，这个方法就是人家提供的api。比如获取浏览器的版本，我们只要调用一个关于version方面的方法就可以得到版本信息，具体怎么得到的是人家在低层写好的。HTML5同样这个道理，什么getElementById()这些方法都成为api，如果人家不给你提供这个方法，你就没法得到一个dom元素。所以说查api文档，就是查那些人家写好的方法。

以下是之前学习的一些HTML5 API的总结，在HTML5中有许多功能和接口很值得我们去了解和学习。

页面可见性API--page Visbility

全屏API --full Screen

获取MediaAPI--getUserMedia

电池API --battery

资源预加载API--link Prefetching

Page Visibility 页面可见性API

该API可以用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签tap的状态变化。 在最小化浏览器、切换tap页面时生效.(如需对app中几个webview进行切换 *** 作时，可使用pageVisibility接口进行相应的事件监听和处理。)

page visibility的介绍

【document.hidden】 该值表示page是否是可见的,值为boolean值

【document.visibilityState】 这个visibilitystate 可有三个值得可能：

【visible】 表示该page是处于最前面的页面并且不是处于一个最小化的窗口

【hidden】 表示该page不是处于最前面的页面或者是处于一个最小化的窗口

【prerender】 表示该页面内容正在重新渲染并且该页面对于用户是不可见的

【isibilitychange Event】*监听window visibility 的改变的事件

相关代码：

// 设置隐藏属性和可见改变事件的名称，属性需要加浏览器前缀 // since some browsers only offer vendor-prefixed support var hidden, state, visibilityChangeif (typeof document.hidden !== "undefined") { hidden = "hidden"visibilityChange = "visibilitychange"state = "visibilityState"} else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"visibilityChange = "mozvisibilitychange"state = "mozVisibilityState"} else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"visibilityChange = "msvisibilitychange"state = "msVisibilityState"} else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"visibilityChange = "webkitvisibilitychange"state = "webkitVisibilityState"} // 添加一个标题改变的监听器 document.addEventListener(visibilityChange, function(e) { // 开始或停止状态处理 }, false)

page visibility的用处

对于visibility的改变，我们可以怎么用了做什么呢。

我们可以对那些定期刷新内容的页面进行控制，当该页面不可见则不刷新，可见则刷新

我们还可以根据页面的是否可见来暂停和继续音频，视频的播放

我们还可以根据页面可见去计算我们网站的用户停留在本页面的更为精确的数据，而不仅仅是打开页面而不停留在本页面。

Full Screen API全屏API

该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。十分简单有用的api.

Full Screen 的介绍

FullScreen 的API使用非常简单，其有两种模式

Launching Fullscreen Mode 启动全屏模式

// 找到适合浏览器的全屏方法 function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen()} else if(element.mozRequestFullScreen) { element.mozRequestFullScreen()} else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen()} } // 启动全屏模式 launchFullScreen(document.documentElement)// the whole page launchFullScreen(document.getElementById("videoElement"))// any individual element

Exit FullScreen Mode 退出全屏模式

// Whack fullscreenfunction exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen()} else if(document.mozCancelFullScreen) { document.mozCancelFullScreen()} else if(document.webkitExitFullscreen) { document.webkitExitFullscreen()} } // Cancel fullscreen for browsers that support it! exitFullscreen()

Full Screen 的相关属性和事件

目前fullscreen 仍存在兼容的问题，许多能使用的浏览器仍需要在其相应的属性和事件加相关的前缀。

【document.fullScreenElement】 该属性表示启动全屏的元素（如 video这些）

【document.fullScreenEnabled】该属性表示当前是否全屏

【fullscreenchange 事件】 监听全屏状态改变的事件

Full Scrren 的相关

css有一些关于fullscreen的css属性

-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen, :full-screen { /*pre-spec */ /* properties */ } :fullscreen { /* spec */ /* properties */ } /* deeper elements */:-webkit-full-screen video { width: 100%height: 100%} /* styling the backdrop*/::backdrop { /* properties */ } ::-ms-backdrop { /* properties */ }

FullScreen的小结

第一次见到这个API是在看一些手机小说和移动端漫画网站时，发现其有全屏的观看的功能。全屏api目前可能存在兼容性的问题，但相信不久的将来肯定会是一个使用频率超高的api

getUserMedia API

该API允许Web应用程序访问摄像头和麦克风，而无需使用插件,该API在客户端最先支持的，但在pc端仍不可用。

getUserMedia API 的介绍

先阅读下下面的html

Snap Photo

相关JS代码

// 设置事件监听器 window.addEventListener("DOMContentLoaded", function() { // 获取元素 var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code)}// 设置video监听器 if(navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function(stream) { video.src = streamvideo.play()}, errBack)} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream)video.play()}, errBack)} }, false)

一旦确定当前浏览器是支持getUserMedia的时， 我们可以同简单的方法将当前我们的video元素的src视频地址赋值给用户手机本地的video，然后通过video的play方法拉起本地video的启动和连接。这样的话我们就可以使用本地的播放器来播放。

电池API（Battery API）

这是一个针对移动设备应用程序的API，主要用于检测设备电池信息。

Battery API 的介绍

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery// 电池属性 console.warn("Battery charging: ", battery.charging)// 当前电池是否在充电 true console.warn("Battery level: ", battery.level)// 0.58 console.warn("Battery discharging time: ", battery.dischargingTime)// 添加事件监听器 battery.addEventListener("chargingchange", function(e) { console.warn("Battery charge change: ", battery.charging)}, false)

为什么获取电池信息的API

为什么我们需要用到battery api？现在许多移动端apps都内嵌着web浏览器包装的（不再是完全native的应用）。所以我们需要一个方法去获取系统的信息，app有一些过程是`十分耗电的，然后我们就需要在用户启动时给用户一些警告信息告诉用户当前设备电量较低。这是一个十分重要简单的api.相应在不久的将来会发挥应有的作用。

Link Prefetching【预加载】

预加载网页内容为浏览者提供一个平滑的浏览体验。这个api我们在业务偶尔也会使用到

什么是link预加载

Link prefetching 是利用浏览器最佳的时间去下载或者预加载一些用户可能将会在不久将来浏览的文档的一种浏览器机制。

!-- full page --] [link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /] [!-- just an image --] [link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" /]

什么时候使用link预加载是否在自己的网站使用预加载，可以参考一下几点：

当你做的是一种类似slideshow的网页，需要提前加载近1-3张页面（假设这些页面并不大）

预先加载在网站中许多网页都会用到的图片

预先加载网站搜索的结果的页面

简而言之,HTML5就是由新的标记引进的新元素形式和为现有元素新增的某些属性，与新的JavaScript APIs的结合体。那HTML5中引入了新增加了哪些新标签与JavaScript API结合体呢？我这里例举了我们平时最常用的几种：

1、 Canvas API是一个具有完整功能的JavaScript API并伴随产生了新HTML5元素<Canvas>。通过Canvas API,您可以利用它和WebGL在浏览器中创建一个2 D或3 D绘图场景，

2、 Contacts API主要应用在移动设备上，为浏览器提供对用户通用通讯录的访问。它在浏览器内建立一个本地存储库，来存储联系人信息。而不是通过访问让你所有联系人信息直接保存在Google +、Facebook或其他网站上, Contacts API将允许您有本地存储库,网站可以通过本地存储库访问存储的联系人信息。现在的主流浏览器都支持Contacts API

3、 通过File API 浏览器可以直接访问用户计算机的沙箱区域将数据存储到文件系统。

4、 在HTML5中Forms API得到了发展，内置了验证功能，在接下来的课程中,您将会学习到如何通过使用内置的规则实现表单验证,以及如何添加自定义规则进行表单验证。

5、 允许浏览器请求用户的位置信息，一旦获权,浏览器可以通过许多不同的方法来确定计算机或设备的实际位置，它将会有一个比例尺来确认精确的地点位置。通过该API能获取经纬度等数据,非常适合应用程序定位。

6、 Media Capture的功能是将本地设备通过JavaScript将与浏览器相连。你将能够访问摄像头,摄像头,等等。

7、 Messaging API被用来与其他API一起使用，比如web web workers,这个我们将将在后面的课程中进一步讨论。

8、 选择(Selection)API的就像jQuery库一样运用非常广泛。在流行jQuery 、HTML5的今天,试图从文档对象模型选择元素是比较复杂的。jQuery弥补了这一差距。其实变得很容易，HTML5将高级选择功能直接内置在浏览器中。使得浏览器的选择性能得到很大的改善，甚至于JQuery选择工具一样速度。我并不是贬低jQuery。jQuery的优势就是DOM的选择,但是,jQuery不仅仅只提供了选择功能，事实上,在本课程中未来的演示的案例中,您将清楚的知道什么时候使用jQuery会更加便利,然后什么时候切换到本地选择会更加方便。.

9、 Server-Sent Events API：一个网页获取新的数据通常需要发送一个请求到服务器,也就是向服务器请求的页面.使用Server-Sent Events API,服务器可以在任何时刻向我们的web页面推送数据和信息.这些被推送进来的信息可以在这个页面上作为事件/数据来处理。服务器推送事件(Server-Sent Events)的优点在于： 只要响应的内容类型是事件/数据流，事件就通过HTTP发送，浏览器能够识别该传输。

10、 Web Notifications API即web消息提醒，它可以使页面可以发出通知，通知将被显示在页面之外的系统层面上（通常使用 *** 作系统的标准通知机制，但是在不同的平台和浏览器上的表现会有差异）。这个功能使 web 应用可以向用户发送信息，即使应用处于空闲状态。最明显的用例之一是一个网页版电子邮件应用程序，每当用户收到了一封新的电子邮件都需要通知用户，即使用户正在使用另一个应用程序。在2013年夏天，这个API还是在被W3C在试用，并没有被很多浏览器所应用。

11、 Web Sockets API：Web Sockets是一种基于 ws 协议的技术，它使得建立全双工连接成为可能。websocket 常见于浏览器中，但是这个协议不受使用平台的限制。它允许你收发信息到服务器端。这个典型的示例就是即时通信。你建立一个对话，如果没有sockets，你可能会去从服务器中去获取新的消息。如果具有了sockets，当消息通过浏览器发到服务端的时候，对方的客户端通过已经建立好的sockets链接就能自动的接收到信息。

12、 Web存储，它有两种版本,本地存储和会话存储。就WEB开发来说,一个会话就是你通过浏览器与服务器之间的一次通话，所以,如果你熟悉服务器端web开发,会话存储可能不是头一次听说。基本上,只要用户页在页面上的统一个会话内，工作数据就不会丢失。如果浏览器关闭或者转向另一个会话，那么此时数据就不复存在。本地存储在不同会话之间仍然能保存数据, 本地存储与cookie 和IndexedDB相比，它可以让你来贮存更多的信息。Web存储与cookie,数据不发送到请求的服务器而是保存在客户端。

这些都是HTML5中新加入的一些比较常用的功能API，如果你想要系统的了解HTML5的新功能，推荐你去一个叫做秒秒学的教程网站上看看，里面有专门的课程来讲解HTML5中的新特性，希望对你有帮助。

---