5 simple and practical APIs in HTML5 (Part 2, including full screen, visibility, photo taking, preloading, battery status)_html5 tutorial skills

The birth of HTML5 has provided us with many wonderful new functions and features of JavaScript and HTML. Some of the new features have been known to us for years and are used extensively, while others are primarily used in cutting-edge mobile technologies, or as auxiliary functions in desktop applications. No matter how powerful and easy-to-use these new HTML5 features are, they are all designed to help us better develop browser front-end applications. I have previously shared with you an article about 5 new HTML5 features that you don’t know about. I hope that some of the technologies mentioned in it can help improve your web applications. Here I also want to share with you some new HTML5 features that few people know about. I hope they can be of some use to you!

1. Full-screen API interface

The powerful full-screen API interface allows programmers to launch the browser into 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();
}
}

// 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 allow programmers to control the style of full-screen elements when the browser is full-screen. This full-screen API is especially useful when you're developing a game; especially a shooter like BananaBread.

2. Page visibility API interface

The page visibility API interface provides a listening event. This event can tell the programmer whether the current page is a tab/window activated in the browser and whether it is the page the user is watching. It can also tell the program When to switch pages and stop viewing this page/window:

Copy the 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";
}

// Add a listener that constantly changes the title
document.addEventListener(visibilityChange, function(e) {
// Start or stop processing depending on state

}, false);

By using this API flexibly, programmers can pause some heavy tasks (such as AJAX or animation) when the user is not watching this page.

3. getUserMedia interface API

getUserMedia API is a very interesting interface! Using this API and adding the

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);
};

// 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);

你一定要在以后的应用中试试这个HTML5新功能，通过浏览器进行各种各样的交互的技术已经越来越流行了！

四、电池接口API

电池接口API很显然是专门为手机里的浏览器应用设计的，它提供了读取设备里的电池电量和充电状态的功能：

复制代码

代码如下:

// Get the battery!
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;

// 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);

// Add a few event listeners
battery.addEventListener("chargingchange", function(e) {
console.warn("Battery charge change: ", battery.charging);
}, false);

这些HTML5提供的电池接口API能直接将电池电量状态告诉web应用，而不需要借助电池传感器或第三方应用。虽然不是一个特别大的功能，但绝对是一个有用的接口。

五、页面预加载(Link prefetch)API

页面预加载(Link prefetch)API功能能够让浏览器在后台静悄悄的预先加载/读取一些页面或资源到当前页面，给用户一个顺滑的使用体验：

复制代码

代码如下:

就是这5个你需要知道和尝试的新HTML5 API。请注意，这些新功能在几年之内就会流行起来，所以，越早接受这些API，你就能更好的创造出最前沿技术的Web应用。花几分钟试试这些新功能，看看你能用它们实现什么样的效果！