以下是一些先前學習的HTML5 API的總結，在HTML5中有許多功能和介面很值得我們去了解和學習。
頁面可見性API--page Visbility
全螢幕API --full Screen
取得MediaAPI--getUserMedia
電池API --battery
資源預載API--linkfetching
電池API --battery資源預載API--linkfetching電池API --battery
此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);// 找到适合浏览器的全屏方法 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// 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();:-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 */
}// 设置事件监听器 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 = stream;
video.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【预加载】
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张页面（假设这些页面并不大）
预先加载在网站中许多网页都会用到的图片
预先加载网站搜索的结果的页面
参考链接 http://davidwalsh.name/
