What are the five powerful HTML5 API?
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.
