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

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.

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.