那些Html5中你必須知道的API
以下是之前學(xué)習(xí)的一些HTML***PI的總結(jié)，在HTML5中有許多功能和接口很值得我們?nèi)チ私夂蛯W(xué)習(xí)。
頁面可見性API--page Visbility
全屏API --full Screen
獲取MediaAPI--getUserMedia
電池API --battery
資源預(yù)加載API--link Prefetching
Page Visibility 頁面可見性API
該API可以用來檢測頁面對于用戶的可見性，即返回用戶當前瀏覽的頁面或標簽tap的狀態(tài)變化。 在最小化瀏覽器、切換tap頁面時生效.(如需對app中幾個webview進行切換操作時，可使用pageVisibility接口進行相應(yīng)的事件監(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應(yīng)用程序全屏運行，使Web應(yīng)用程序更像本地應(yīng)用程序。十分簡單有用的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 仍存在兼容的問題，許多能使用的瀏覽器仍需要在其相應(yīng)的屬性和事件加相關(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應(yīng)用程序訪問攝像頭和麥克風(fēng)，而無需使用插件,該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è)備應(yīng)用程序的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的應(yīng)用）。所以我們需要一個方法去獲取系統(tǒng)的信息，app有一些過程是`十分耗電的，然后我們就需要在用戶啟動時給用戶一些警告信息告訴用戶當前設(shè)備電量較低。這是一個十分重要簡單的api.相應(yīng)在不久的將來會發(fā)揮應(yīng)有的作用。
Link Prefetching【預(yù)加載】
預(yù)加載網(wǎng)頁內(nèi)容為瀏覽者提供一個平滑的瀏覽體驗。這個api我們在業(yè)務(wù)偶爾也會使用到
什么是link預(yù)加載
Link prefetching 是利用瀏覽器***的時間去下載或者預(yù)加載一些用戶可能將會在不久將來瀏覽的文檔的一種瀏覽器機制。
- !-- 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預(yù)加載是否在自己的網(wǎng)站使用預(yù)加載，可以參考一下幾點：
當你做的是一種類似slideshow的網(wǎng)頁，需要提前加載近1-3張頁面（假設(shè)這些頁面并不大）
預(yù)先加載在網(wǎng)站中許多網(wǎng)頁都會用到的圖片
預(yù)先加載網(wǎng)站搜索的結(jié)果的頁面
