HTML5 provides some very powerful JavaScript and HTML APIs

HTML5 provides some very powerful JavaScript and HTML APIs to help developers build wonderful desktop and mobile applications. This article will introduce five new types of APIS, hoping to help your development work. 1. Full Screen API (Fullscreen API) this API allows developers to program Web applications to run in full screen mode, making Web applications more like local applications. // Find the full screen function launchFullScreen (element) {if (element. requestFullScreen) {element. requestFullScreen ();} else if (element. required requestfullscreen) {element. required requestfullscreen ();} else if (element. webkitRequestFullScreen) {element. webkitRequestFullScreen () ;}/// enable full screen mode launchFullScreen(document.doc umentElement); // the whole page launchFullScreen (document. getElementById ("videoElement "));/ /Any individual element tutorial/DEMO 2. page Visibility API (Page Visibility API) this API can be used to detect the Visibility of a Page to a user, that is, to return the status changes of the Page or tag currently browsed by the user. // Set the name of the hidden property and visible change event. The property must contain the browser prefix // 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 = "Your visibilityChange"; state = "Your visibilitystate";} else if (typeof document. msHidden! = "Undefined") {hidden = "msHidden"; visibilityChange = "msvisibilitychange"; state = "msVisibilityState";} else if (typeof document. webkitHidden! = "Undefined") {hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; state = "webkitVisibilityState";} // Add a listener document with a title change. addEventListener (visibilityChange, function (e) {// start or stop State Processing}, false); tutorial/demo 3. getUserMedia API this API allows Web applications to access cameras and microphones without using plug-ins. // Set the event listener window. addEventListener ("DOMContentLoaded", function () {// obtain the element 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) ;}; // sets the video listener if (navigator. getUserMedia) {// Standard navigator. getUserMedia (videoObj, fun Ction (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); tutorial/demo 4. battery API is an API for mobile device applications. It is mainly used to detect the Battery information of devices. Var battery = navigator. battery | navigator. webkitBattery | navigator. mozBattery; // battery properties console. warn ("Battery charging:", battery. charging); // true console. warn ("Battery level:", battery. level); // 0.58 console. warn ("Battery discharging time:", battery. dischargingTime); // Add the event listener battery. addEventListener ("chargingchange", function (e) {console. warn ("Battery charge change:", battery. chargi Ng) ;}, false); tutorial 5. Link Prefetching pre-loads the webpage content to provide a smooth browsing experience for viewers. <! -- Full page --> <link rel = "prefetch" href =" http://davidwalsh.name/css-enhancements-user-experience "/> <! -- Just an image --> <link rel = "prefetch" href = http://www.bkjia.com/uploadfile/2013/1106/20131106041859193.png "/>