[轉載]你可能不知道的5個功能強大的 HTML5 API —— html5系列

時間 2019-11-18

標籤轉載可能不知道功能強大 html5 html api 系列欄目 HTML5 简体版

原文原文鏈接

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

Fullscreen API

　　這個 HTML5 全屏 API 讓 Web 開發者能夠經過編程控制頁面的全屏顯示。這個 API 對於 JavaScript 遊戲開發特別有用，例如這款單人射擊遊戲 BananaBread，在全屏狀態下玩那是至關酷。php

 
         // 根據目標元素調用相應的方法 
        
         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" 
         ));  
         // 單個元素

　　使用教程在線演示css

Page Visibility API

　　Page Visibility API 能夠幫助開發者監聽用戶的焦點在哪一個頁面選項卡上面以及用戶在選項庫或者窗口之間的移動狀況。若是使用合理的話，當焦點不在某個頁面上的時候能夠中止一些消耗很大的任務。html

 
         // 部分瀏覽器只支持 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 
         );

　　使用教程在線演示html5

getUserMedia API

　　特別有趣的一個 API，可以調用電腦的攝像頭，結合 <video> 標籤和 Canvas 就能在瀏覽器中拍攝照片了。將來這個 API 將被普遍用來讓瀏覽器和用戶之間互動。java

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

　　使用教程在線演示css3

Battery API

　　顧名思義，這是一個電池 API ，明顯是爲移動設備準備的，用於監控電池的狀態。可以經過事件監聽電池電量的變化，電池的等級、可用時間等狀態。下面是是示例代碼，能夠經過後面的教程連接學習更詳細的使用方法。web

 
         // 獲取電池對象 
        
         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 應用程序的時候可以有流暢的使用體驗。能夠預加載整個頁面，也能夠是單個資源，示例代碼以下：canvas

 
         <!-- 預加載整個頁面 --> 
        
         < 
         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" />