你可能不知道的5個功能強大的 HTML5 API

HTML5 新增了許多重要的特性，像 video、audio 和 canvas 等等，這些特性使得能夠很容易的網(wǎng)頁中包含多媒體內(nèi)容，而不需要任何的插件或者 API。而其它的新元素，例如 section、article、header 和 nav 等則是用來豐富網(wǎng)頁內(nèi)容。另外還有很多強大的 JavaScript API，下面這5個 HTML5 API 你可能不知道，通過今天這篇文章可以了解一下。

Fullscreen API

　　這個 HTML5 全屏 API 讓 Web 開發(fā)者可以通過編程控制頁面的全屏顯示。這個 API 對于 JavaScript 游戲開發(fā)特別有用，例如這款單人射擊游戲 BananaBread，在全屏狀態(tài)下玩那是相當酷。

// 根據(jù)目標元素調(diào)用相應(yīng)的方法
function launchFullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}

// 在支持的瀏覽器中啟動全屏
launchFullScreen(document.documentElement); // 整個頁面
launchFullScreen(document.getElementById("videoElement")); // 單個元素

　　使用教程在線演示

Page Visibility API

　　Page Visibility API 可以幫助開發(fā)者監(jiān)聽用戶的焦點在哪個頁面選項卡上面以及用戶在選項庫或者窗口之間的移動情況。如果使用合理的話，當焦點不在某個頁面上的時候可以停止一些消耗很大的任務(wù)。

// 部分瀏覽器只支持 vendor-prefixed
// 根據(jù)瀏覽器支持情況設(shè)置隱藏屬性和可見狀態(tài)改變事件
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) {
  // Start or stop processing depending on state
}, false);

　　使用教程在線演示

getUserMedia API

　　特別有趣的一個 API，能夠調(diào)用電腦的攝像頭，結(jié)合 <video> 標簽和 Canvas 就能在瀏覽器中拍攝照片了。未來這個 API 將被廣泛用來讓瀏覽器和用戶之間互動。

// 添加事件監(jiān)聽器
window.addEventListener("DOMContentLoaded", function() {
  // 獲取元素，創(chuàng)建配置
  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); 
    };

  // 添加視頻監(jiān)聽器
  if(navigator.getUserMedia) { // 標準的API
    navigator.getUserMedia(videoObj, function(stream) {
      video.src = stream;
      video.play();
    }, errBack);
  } else if(navigator.webkitGetUserMedia) { // WebKit 核心的API
    navigator.webkitGetUserMedia(videoObj, function(stream){
      video.src = window.webkitURL.createObjectURL(stream);
      video.play();
    }, errBack);
  }
}, false);

　　使用教程在線演示

Battery API

　　顧名思義，這是一個電池 API ，明顯是為移動設(shè)備準備的，用于監(jiān)控電池的狀態(tài)。能夠通過事件監(jiān)聽電池電量的變化，電池的等級、可用時間等狀態(tài)。下面是是示例代碼，可以通過后面的教程鏈接學習更詳細的使用方法。

// 獲取電池對象
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);

// 監(jiān)聽電池狀態(tài)
battery.addEventListener("chargingchange", function(e) {
  console.warn("Battery charge change: ", battery.charging);
}, false);

　　使用教程

Link Prefetching

　　這個鏈接預取 API 非常有用，讓開發(fā)者可以控制網(wǎng)頁資源在后臺安靜的預先加載，這樣用戶在瀏覽網(wǎng)站或者使用 Web 應(yīng)用程序的時候能夠有流暢的使用體驗。可以預加載整個頁面，也可以是單個資源，示例代碼如下：

<!-- 預加載整個頁面 -->
<link rel="prefetch"  />
 
<!-- 預加載一張圖片 -->
<link rel="prefetch"  />

　　使用教程

　　上面這5個 HTML5 API 值得關(guān)注，在不久的將來這些 API 將被廣泛的使用，因此越早掌握它們可以幫助你為構(gòu)建優(yōu)秀的 Web 應(yīng)用打下堅實的基礎(chǔ)。通過使用教程可以快速的熟悉這些 API 的基本用法和使用場景，提供的在線演示展示了直觀的應(yīng)用情況。