Shulou(Shulou.com)06/02 Report--

Which are the five powerful HTML5 API, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

1. Full screen API (Fullscreen API)

The API allows developers to programmatically run Web applications full screen, making Web applications more like native applications.

/ / find a full-screen method suitable for browsers

Function launchFullScreen (element) {

If (element.requestFullScreen) {

Element.requestFullScreen ()

} else if (element.mozRequestFullScreen) {

Element.mozRequestFullScreen ()

} else if (element.webkitRequestFullScreen) {

Element.webkitRequestFullScreen ()

}

}

/ / start full screen mode

LaunchFullScreen (document.documentElement); / / the whole page

LaunchFullScreen (document.getElementById ("videoElement")); / / any individual element

two。 Page visibility API (Page Visibility API)

The API can be used to detect the visibility of the page to the user, that is, to return the status change of the page or tag that the user is currently browsing.

/ / set the hidden property and the name of the visible change event. The property needs to be prefixed with 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 = "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";} / / add a title change listener document.addEventListener (visibilityChange, function (e) {/ stop state processing}, false)

3. GetUserMedia API

The API allows Web applications to access cameras and microphones without using plug-ins.

/ / set event listeners

Window.addEventListener ("DOMContentLoaded", function () {

/ / get 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)

}

/ / set video listener

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)

4. Battery API (Battery API)

This is an API for mobile device applications, mainly used to detect device battery information.

Var battery = navigator.battery | | navigator.webkitBattery | | navigator.mozBattery; / / Battery attribute console.warn ("Battery charging:", battery.charging); / / true console.warn ("Battery level:", battery.level); / / .58 console.warn ("Battery discharging time:", battery.dischargingTime); / / add event listener battery.addEventListener ("chargingchange", function (e) {console.warn ("Battery charge change:", battery.charging)) }, false)

5. Link Prefetching

Preload web content to provide a smooth browsing experience for visitors.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.