What are the powerful HTML5 API functions and how to use them?
This article mainly introduces the relevant knowledge of "what are the powerful HTML5 API functions and how to use them". The editor shows you the operation process through actual cases. The operation method is simple and fast, and it is practical. I hope that this article "what are the powerful HTML5 API functions and how to use them" can help you solve the problem.
1. Full screen API (Fullscreen API)
The API allows developers to programmatically run Web applications full screen, making Web applications more like native applications.
Copy the code
The code is as follows:
/ / 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.
Copy the code
The code is as follows:
/ / set the name of the hidden property and visible change event. The property needs to be prefixed by the browser.
/ / 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 listener with a title change
Document.addEventListener (visibilityChange, function (e) {
/ / start or stop status processing
}, false)
3. GetUserMedia API
The API allows Web applications to access cameras and microphones without using plug-ins.
Copy the code
The code is as follows:
/ / 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.
Copy the code
The code is as follows:
Var battery = navigator.battery | | navigator.webkitBattery | | navigator.mozBattery
/ / Battery Properties
Console.warn ("Battery charging:", battery.charging); / / true
Console.warn ("Battery level:", battery.level);
Console.warn ("Battery discharging time:", battery.dischargingTime)
/ / add event listeners
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.
Copy the code
The code is as follows:
This is the end of the content about "what are the powerful HTML5 API functions and how to use them?" Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
