Five simple and practical APIs in HTML5 (Part 2, including full screen, visibility, photographing, preloading and battery status)

Time:2022-5-9

The birth of HTML5 provides us with many wonderful new functions and features of JavaScript and HTML. Some new features have been known for many years and have been widely used, while others are mainly used in cutting-edge mobile technology or desktop applications. No matter how powerful and easy these new HTML5 functions are, they are all designed to help us better develop browser front-end applications. I’ve previously shared with you five new HTML5 features you don’t know. The purpose is to hope that some of the technologies mentioned in it can help improve your web application. Here I also want to share with you some new HTML5 features that few people know. I hope they can be useful to you!

1、 Full screen API interface

The powerful full screen API interface enables the programmer to start the browser to enter the full screen mode through programming and request the user’s permission:

Copy code

The code is as follows:

// Find the right method, call on correct element
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}</p>
<p>// Launch fullscreen for browsers that support it!
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById(“videoElement”)); // any individual element

Any page element can be the target of full screen output. HTML5 even provides a CSS pseudo class to let programmers control the style of full screen elements when the browser is full screen. This full screen API interface is particularly useful when you are developing games; Especially in shooting games like banana bread.

2、 Page visibility API interface

The page visibility API interface provides a listening event to the user. This event can tell the programmer whether the current page is a tab / window activated in the browser and whether it is a page that the user is viewing. It can also tell the programmer when the user switches the page and no longer views the page / window:

Copy code

The code is as follows:

// Adapted slightly from Sam Dutton
// Set name of hidden property and visibility change event
// 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”;
}</p>
<p>// Add a listener that constantly changes the title
document.addEventListener(visibilityChange, function(e) {
// Start or stop processing depending on state</p>
<p>}, false);

By using this API flexibly, programmers can pause some heavy tasks (such as Ajax or animation) when users are not watching this page.

3、 Getusermedia interface API

Getusermedia API is a very interesting interface! Using this API, plus the < video > and < canvas > tags, you can take photos in the browser!

Copy code

The code is as follows:

// Put event listeners into place
window.addEventListener(“DOMContentLoaded”, function() {
// Grab elements, create settings, etc.
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);
};</p>
<p> // Put video listeners into place
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);

You must try this new HTML5 function in future applications. The technology of various interactions through browsers has become more and more popular!

4、 Battery interface API

Obviously, the API provides the function of reading the battery state in the mobile phone and the application:

Copy code

The code is as follows:

// Get the battery!
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;</p>
<p>// A few useful battery properties
console.warn(“Battery charging: “, battery.charging); // true
console.warn(“Battery level: “, battery.level); // 0.58
console.warn(“Battery discharging time: “, battery.dischargingTime);</p>
<p>// Add a few event listeners
battery.addEventListener(“chargingchange”, function(e) {
console.warn(“Battery charge change: “, battery.charging);
}, false);

These battery interface APIs provided by HTML5 can directly tell the battery power status to web applications without the help of battery sensors or third-party applications. Although it is not a particularly large function, it is definitely a useful interface.

5、 Link prefetch API

The link prefetch API function enables the browser to quietly preload / read some pages or resources to the current page in the background, giving users a smooth experience:

Copy code

The code is as follows:

<!– Preload a page — >
<link rel=”prefetch” href=” https://www.jb51.net/link-prefetch/ ” /></p>
<link rel=”prefetch” href=”https://www.jb51.net/wordpress/wp-content/themes/webhek2/images/follow-us.jpg?067588″ />

These are the five new HTML5 APIs you need to know and try. Please note that these new features will become popular within a few years, so the sooner you accept these APIs, the better you can create cutting-edge web applications. Take a few minutes to try these new features and see what you can do with them!