那些Html5中你必須知道的API

2015-10-27 10:22:47

該API可以用來檢測頁面對于用戶的可見性，即返回用戶當前瀏覽的頁面或標簽tap的狀態(tài)變化。在最小化瀏覽器、切換tap頁面時生效.(如需對app中幾個webview進行切換操作時，可使用pageVisibility接口進行相應的事件監(jiān)聽和處理。

以下是之前學習的一些HTML***PI的總結(jié)，在HTML5中有許多功能和接口很值得我們?nèi)チ私夂蛯W習。

頁面可見性API--page Visbility

全屏API --full Screen

獲取MediaAPI--getUserMedia

電池API --battery

資源預加載API--link Prefetching

Page Visibility 頁面可見性API

該API可以用來檢測頁面對于用戶的可見性，即返回用戶當前瀏覽的頁面或標簽tap的狀態(tài)變化。在最小化瀏覽器、切換tap頁面時生效.(如需對app中幾個webview進行切換操作時，可使用pageVisibility接口進行相應的事件監(jiān)聽和處理。)

page visibility的介紹

【document.hidden】該值表示page是否是可見的,值為boolean值

【document.visibilityState】這個visibilitystate 可有三個值得可能：

【visible】表示該page是處于最前面的頁面并且不是處于一個最小化的窗口

【hidden】表示該page不是處于最前面的頁面或者是處于一個最小化的窗口

【prerender】表示該頁面內(nèi)容正在重新渲染并且該頁面對于用戶是不可見的

【isibilitychange Event】*監(jiān)聽window visibility 的改變的事件

相關(guān)代碼：

// 設(shè)置隱藏屬性和可見改變事件的名稱，屬性需要加瀏覽器前綴 
// 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"; 
} 
// 添加一個標題改變的監(jiān)聽器 
document.addEventListener(visibilityChange, function(e) { 
// 開始或停止狀態(tài)處理 
}, false);

page visibility的用處

對于visibility的改變，我們可以怎么用了做什么呢。

我們可以對那些定期刷新內(nèi)容的頁面進行控制，當該頁面不可見則不刷新，可見則刷新

我們還可以根據(jù)頁面的是否可見來暫停和繼續(xù)音頻，視頻的播放

我們還可以根據(jù)頁面可見去計算我們網(wǎng)站的用戶停留在本頁面的更為精確的數(shù)據(jù)，而不僅僅是打開頁面而不停留在本頁面。

Full Screen API全屏API

該API允許開發(fā)者以編程方式將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 的相關(guān)屬性和事件

目前fullscreen 仍存在兼容的問題，許多能使用的瀏覽器仍需要在其相應的屬性和事件加相關(guān)的前綴。

【document.fullScreenElement】該屬性表示啟動全屏的元素（如 video這些）

【document.fullScreenEnabled】該屬性表示當前是否全屏

【fullscreenchange 事件】監(jiān)聽全屏狀態(tài)改變的事件

Full Scrren 的相關(guān)

css有一些關(guān)于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的小結(jié)

***次見到這個API是在看一些手機小說和移動端漫畫網(wǎng)站時，發(fā)現(xiàn)其有全屏的觀看的功能。全屏api目前可能存在兼容性的問題，但相信不久的將來肯定會是一個使用頻率超高的api

getUserMedia API

該API允許Web應用程序訪問攝像頭和麥克風，而無需使用插件,該API在客戶端***支持的，但在pc端仍不可用。

getUserMedia API 的介紹

先閱讀下下面的html

Snap Photo

相關(guān)JS代碼

// 設(shè)置事件監(jiān)聽器 
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); 
}; 
// 設(shè)置video監(jiān)聽器 
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）

這是一個針對移動設(shè)備應用程序的API，主要用于檢測設(shè)備電池信息。

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); 
// 添加事件監(jiān)聽器 
battery.addEventListener("chargingchange", function(e) { 
console.warn("Battery charge change: ", battery.charging); 
}, false);

為什么獲取電池信息的API

為什么我們需要用到battery api？現(xiàn)在許多移動端apps都內(nèi)嵌著web瀏覽器包裝的（不再是完全native的應用）。所以我們需要一個方法去獲取系統(tǒng)的信息，app有一些過程是`十分耗電的，然后我們就需要在用戶啟動時給用戶一些警告信息告訴用戶當前設(shè)備電量較低。這是一個十分重要簡單的api.相應在不久的將來會發(fā)揮應有的作用。

Link Prefetching【預加載】

預加載網(wǎng)頁內(nèi)容為瀏覽者提供一個平滑的瀏覽體驗。這個api我們在業(yè)務(wù)偶爾也會使用到

什么是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預加載是否在自己的網(wǎng)站使用預加載，可以參考一下幾點：

當你做的是一種類似slideshow的網(wǎng)頁，需要提前加載近1-3張頁面（假設(shè)這些頁面并不大）

預先加載在網(wǎng)站中許多網(wǎng)頁都會用到的圖片

預先加載網(wǎng)站搜索的結(jié)果的頁面

責任編輯：chenqingxiang 來源： coverguo的博客