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

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

Fullscreen API

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

// 根據目標元素調用相應的方法
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 可以幫助開發者監聽用戶的焦點在哪個頁面選項卡上面以及用戶在選項庫或者窗口之間的移動情況。如果使用合理的話，當焦點不在某個頁面上的時候可以停止一些消耗很大的任務。

// 部分瀏覽器只支持 vendor-prefixed
// 根據瀏覽器支持情況設置隱藏屬性和可見狀態改變事件
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，能夠調用電腦的攝像頭，結合 <video> 標簽和 Canvas 就能在瀏覽器中拍攝照片了。未來這個 API 將被廣泛用來讓瀏覽器和用戶之間互動。

// 添加事件監聽器
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); 
    };

  // 添加視頻監聽器
  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 ，明顯是為移動設備准備的，用於監控電池的狀態。能夠通過事件監聽電池電量的變化，電池的等級、可用時間等狀態。下面是是示例代碼，可以通過后面的教程鏈接學習更詳細的使用方法。

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

　　使用教程

 

Link Prefetching

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

<!-- 預加載整個頁面 -->
<link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />
 
<!-- 預加載一張圖片 -->
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

　　使用教程

 

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

 

您可能還喜歡

 

• 眼花繚亂的 HTML5 和 JavaScript 效果
• 分享35款非常優秀的 HTML5 網頁游戲
• 九個讓人驚嘆的HTML5和JavaScript實驗
• 20個驚艷的 HTML5 Canvas 應用試驗
• 12個很炫的 HTML5 和 CSS3 應用示例

 

英文鏈接：5 More HTML5 APIs You Didn’t Know Existed

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源