HTML5的这些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, visibilityChange;

　　if (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 事件】 监听全屏状态改变的事件

　　2.2 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

　　

　　


　　

　　

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

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

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

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