HTML5中5個簡單實用的API（第二篇，含全螢幕、可見性、拍照、預先載入、電池狀態）_html5教學技巧

HTML5的誕生為我們提供了許多精彩的JavaScript和HTML新功能和新功能。有些新特徵我們已知多年並大量的使用，而另一些主要是用在前沿的手機移動技術上，或者桌面應用中起輔助作用。不管這些HTML5新功能有多強大，多好用，它們都是為了幫助我們更好的開發瀏覽器前端應用。我之前跟大家分享過一篇你不知道的5個HTML5新功能，目的是希望裡面的提到的一些技術能幫助改進你的web應用。這裡我還想分享給大家一些少有人知道的HTML5新功能，希望能對你有些用處！

一、全螢幕API介面

強大的全螢幕API介面能讓程式設計師透過程式啟動瀏覽器進入全螢幕模式，並請求使用者的允許：

複製程式碼

程式碼如下:

// Find the right method, call on correct element
function launchFullScreen(element) {
🎜>function launchFullScreen(element) {
> element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen); 🎜> }
}

// Launch fullscreen for browsers that support it!
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElementvid; >
任何頁面元素都可以成為全螢幕輸出的目標，HTML5裡甚至還提供了一個CSS偽類來讓程式設計師在瀏覽器全螢幕時控制全螢幕元素的樣式。當你在開發遊戲時這個全螢幕API介面特別有用；尤其像BananaBread這樣的槍擊遊戲。

二、頁面可見性API介面

頁面可見性API介面提供給用了一個監聽事件，這個事件能告訴程式設計師目前頁面是否是用瀏覽器中啟動的標籤頁/視窗、是否是使用者正在觀看的頁面，它還能告訴程式員用戶何時切換頁面、不再觀看本頁/視窗：

複製程式碼

程式碼如下:

// Adapted slightly from Sam Dutton

// Set name of hidden property and visibility change event

// since some browsers only offer vendor-prefixed supportif (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibility]State .msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else 🎜> state = "msVisibilityState";
} else （webtype document. = "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}

// Add a listener that constantly changes the title
document.addEventListener(visibilityChange, function(e) {
// Start or stop processing depending on state

}, false);

透過靈活的使用這個API，程式設計師可以在使用者不觀看本頁時暫停一些繁重的任務(例如AJAX或動畫)。

三、getUserMedia介面API

getUserMedia API是個非常有趣的介面！使用這個API，加上

複製程式碼

程式碼如下:

// 將事件監聽器放置到位
window.addEventListener("DOMContentLoaded", function() {
// 抓取元素，建立設定等
var canvas = document.getElementBy ("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("視訊擷取錯誤: ", error.code);
};

// 將視訊監聽器放置到位
if(navigator.getUserMedia) { // 標準
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play( );
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit 字首
navigator.webkitGetUserMedia(videoObj, function(> navigator.webkitGetUserMedia(videoObj, function(). = window. webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);

你一定要在以後的應用程式中嘗試這個HTML5新功能，透過瀏覽器進行各種互動的技術已經越來越流行了！

四、電池介面API

電池介面API顯然是專門為手機裡的瀏覽器應用設計的，它提供了讀取設備裡的電池電量和充電狀態的功能：

複製程式碼程式碼如下：

//取得電池！
var Battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;

// 一些有用的電池屬性
console.warn("電池充電: ", Battery.charging); // true
console.warn("電池電量：", Battery.level); / / 0.58
console.warn("電池放電時間：",battery.dischargingTime);

// 增加一些事件監聽器
battery.addEventListener("chargingchange", function(e) {
console.warn("電池電量變化: ", Battery.charging);
} , false);

這些HTML5提供的電池介面API能夠直接將電池電量狀態告訴web，而不需要藉助電池感測器或第三方應用。雖然不是一個特別大的功能，但絕對是一個有用的介面。

五、頁面預先載入(Link prefetch)API

頁面預先載入（連結預取）API功能能讓瀏覽器在後台靜悄悄的預先載入/讀取一些頁面或資源到目前頁面，給使用者一個順滑的使用體驗：

複製程式碼程式碼如下：

就是這5個你知道需要和嘗試的新HTML5 API。請注意，這些新功能在幾年之內就會流行起來，所以，越早接受這些API，你就能更好的創造出最好的前沿技術的 Web 應用。花三十分鐘試試這些新功能，看看你能用它們達到什麼樣的效果！