APIs you must know in Html5

The following is a summary of some HTML APIs that we have learned before. There are many functions and interfaces in HTML5 that are worth understanding and learning.

Page Visibility API

Full Screen API --full Screen

Get Media API--getUserMedia

Battery API --battery

Resource preloading API--link Prefetching

Page Visibility API

This API can be used to detect the visibility of a page to the user, that is, to return the status change of the page or tab tap that the user is currently browsing. It takes effect when the browser is minimized or the tap page is switched. (If you need to switch between several webviews in the app, you can use the pageVisibility interface to monitor and process the corresponding events.)

Introduction to page visibility

【document.hidden】 This value indicates whether the page is visible. The value is a boolean value.

【document.visibilityState】 This visibilitystate can have three possible values:

[visible] Indicates that the page is the frontmost page and is not in a minimized window

[hidden] means that the page is not the front page or is in a minimized window

[prerender] Indicates that the page content is being re-rendered and the page is not visible to the user.

【isibilitychange Event】*Monitors window visibility change events

Relevant code:

 // Set the name of the hidden attribute and visible change event, the attribute needs to be prefixed with 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 title change listener  
 document.addEventListener(visibilityChange, function(e) {
 // Start or stop state processing  
 }, false );

The benefits of page visibility

What can we do with the changes in visibility?

We can control those pages that refresh content regularly. When the page is not visible, it will not refresh. When it is visible, it will refresh.

We can also pause and resume audio and video playback based on whether the page is visible.

We can also calculate more accurate data on the number of users on our website who stay on this page based on page visibility, rather than just opening the page but not staying on this page.

Full Screen APIFull Screen API

This API allows developers to programmatically run web applications in full screen, making web applications more like local applications. Very simple and useful API.

Introduction to Full Screen

The FullScreen API is very simple to use and has two modes:

Launching Fullscreen Mode

 // Find the full screen method suitable for the browser  
 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  

Exit FullScreen Mode Exit FullScreen Mode

 // Whack fullscreenfunction exitFullscreen() {  
 if (document.exitFullscreen) {
 document.exitFullscreen();
 } else   if (document.mozCancelFullScreen) {
 document.mozCancelFullScreen();
 } else   if (document.webkitExitFullscreen) {
 document.webkitExitFullscreen();
 }
 }
 // Cancel fullscreen for browsers that support it!  
 exitFullscreen();

Full Screen related properties and events

Currently, there are still compatibility issues with fullscreen, and many browsers that can use it still need to add relevant prefixes to their corresponding properties and events.

【document.fullScreenElement】 This property indicates the element that starts the full screen (such as video)

[document.fullScreenEnabled] This property indicates whether the current screen is full screen

【fullscreenchange event】 Listen for fullscreen status change events

Full Scrren related

There are some CSS properties about fullscreen in CSS

 -webkit-full-screen,
 :-moz-full-screen,
 :-ms-fullscreen,
 :full-screen {
 /*pre-spec */  
 /* properties */  
 }
 :fullscreen {
 /* spec */  
 /* properties */  
 }
 /* deeper elements */ :-webkit-full-screen video {
 width: 100 %;
 height: 100 %;
 }
 /* styling the backdrop*/ ::backdrop {
 /* properties */  
 }
 ::-ms-backdrop {
 /* properties */  
 }

Summary of FullScreen

The first time I saw this API was when I was looking at some mobile novels and mobile comics websites, and found that it had a full-screen viewing function. The full-screen API may have compatibility issues at present, but I believe it will definitely be a highly used API in the near future.

getUserMedia API

The API allows web applications to access the camera and microphone without the use of plug-ins. The API is fully supported on the client side, but is still not available on the PC side.

Introduction to getUserMedia API

First read the following html

 Snap Photo

Related JS code

 // Set up 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 up the 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 );

Once we have confirmed that the current browser supports getUserMedia, we can use a simple method to assign the src video address of our current video element to the local video of the user's mobile phone, and then use the video's play method to start and connect the local video. In this way, we can use the local player to play it.

Battery API

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

Introduction to Battery API

 var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
 //Battery properties  
 console.warn( "Battery charging: " , battery.charging); // Is the battery currently charging true  
 console.warn( "Battery level: " , battery.level); // 0.58  
 console.warn( "Battery discharging time: " , battery.dischargingTime);
 // Add event listener  
 battery.addEventListener( "chargingchange" , function(e) {
 console.warn( "Battery charge change: " , battery.charging);
 }, false );

Why get battery information API

Why do we need to use the battery API? Nowadays, many mobile apps are embedded with web browsers (no longer completely native applications). So we need a way to get system information. Some processes in the app are very power-consuming, so we need to give users some warning messages when they start the app to tell them that the current battery level of the device is low. This is a very important and simple API. It will play its due role in the near future.

Link Prefetching

Preload web page content to provide a smooth browsing experience for viewers. We occasionally use this API in our business.

What is link preloading?

Link prefetching is a browser mechanism that uses the browser's latest time to download or preload documents that the user may browse in the near future.

 !-- full page --]
 [link rel= "prefetch" href= "http://davidwalsh.name/css-enhancements-user-experience" /]
 [!-- just an image --]
 [link rel= "prefetch" href= "http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" /]

When to use link preloading Whether to use preloading on your own website, you can refer to the following points:

When you are making a slideshow-like web page, you need to load nearly 1-3 pages in advance (assuming these pages are not large)

Preload images that are used by many pages on your site

Preload the results page for site searches