[Reprint] You may not know the 5 powerful HTML5 API--HTML5 series

HTML5 has added many important features, such as video, audio, and canvas, which make it easy to include multimedia content in a Web page without needing any plugins or APIs. Other new elements, such as section, article, header, and NAV, are used to enrich the content of the Web. There are also a lot of powerful JavaScript API, below these 5 HTML5 API you may not know, through today this article can understand.

Fullscreen API

This HTML5 full-screen API allows WEB developers to programmatically control the full-screen display of a page. This API is especially useful for JavaScript game development, such as the single Shooter Bananabread, which is pretty cool to play in full-screen mode.

1234567891011121314

// 根据目标元素调用相应的方法functionlaunchFullScreen(element) {  if(element.requestFullScreen) {    element.requestFullScreen();  } elseif(element.mozRequestFullScreen) {    element.mozRequestFullScreen();  } elseif(element.webkitRequestFullScreen) {    element.webkitRequestFullScreen();  }}// 在支持的浏览器中启动全屏launchFullScreen(document.documentElement); // 整个页面launchFullScreen(document.getElementById("videoElement")); // 单个元素

Use the Tutorials online demo

Page Visibility API

The page Visibility API helps developers to listen to which page tabs the user focuses on and how the user moves between the Options library or window. If used properly, you can stop some of the most expensive tasks when the focus is not on a page.

12345678910111213141516171819202122232425

// 部分浏览器只支持 vendor-prefixed// 根据浏览器支持情况设置隐藏属性和可见状态改变事件varhidden, state, visibilityChange;if(typeofdocument.hidden !== "undefined") {  hidden = "hidden";  visibilityChange = "visibilitychange";  state = "visibilityState";} elseif(typeofdocument.mozHidden !== "undefined") {  hidden = "mozHidden";  visibilityChange = "mozvisibilitychange";  state = "mozVisibilityState";} elseif(typeofdocument.msHidden !== "undefined") {  hidden = "msHidden";  visibilityChange = "msvisibilitychange";  state = "msVisibilityState";} elseif(typeofdocument.webkitHidden !== "undefined") {  hidden = "webkitHidden";  visibilityChange = "webkitvisibilitychange";  state = "webkitVisibilityState";}// 添加一个时间来实时改变页面的标题document.addEventListener(visibilityChange, function(e) {  // Start or stop processing depending on state}, false);

Use the Tutorials online demo

Getusermedia API

A particularly interesting API that can call a computer's camera, combine <video> tags and Canvas to take photos in a browser. In the future, this API will be widely used for interaction between browsers and users.

123456789101112131415161718192021222324

// 添加事件监听器window.addEventListener("DOMContentLoaded", function() {  // 获取元素，创建配置  varcanvas = document.getElementById("canvas"),    context = canvas.getContext("2d"),    video = document.getElementById("video"),    videoObj = { "video": true},    errBack = function(error) {      console.log("Video capture error: ", error.code);    };  // 添加视频监听器  if(navigator.getUserMedia) { // 标准的API    navigator.getUserMedia(videoObj, function(stream) {      video.src = stream;      video.play();    }, errBack);  } elseif(navigator.webkitGetUserMedia) { // WebKit 核心的API    navigator.webkitGetUserMedia(videoObj, function(stream){      video.src = window.webkitURL.createObjectURL(stream);      video.play();    }, errBack);  }}, false);

Use the Tutorials online demo

Battery API

As the name implies, this is a battery API, apparently prepared for mobile devices, to monitor battery status. The ability to monitor battery power changes through events, battery level, available time and other status. Here is the sample code, which you can use to learn more about using the tutorial links later.

123456789101112

// 获取电池对象varbattery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;// 一组非常有用的电池属性console.warn("Battery charging: ", battery.charging); // trueconsole.warn("Battery level: ", battery.level); // 0.58console.warn("Battery discharging time: ", battery.dischargingTime);// 监听电池状态battery.addEventListener("chargingchange", function(e) {  console.warn("Battery charge change: ", battery.charging);}, false);

Using tutorials

Link prefetching

This link prefetching API is useful for developers to control the quiet pre-loading of web resources in the background so that users can have a smooth experience when browsing the Web or using a Web application. The entire page can be preloaded, or it can be a single resource, as shown in the sample code:

12345

<!-- 预加载整个页面 --><linkrel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />  <!-- 预加载一张图片 --><linkrel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

Using tutorials

The above 5 HTML5 APIs are worth noting, and in the near future these APIs will be widely used, so the sooner you can master them, the better you will be able to build a solid foundation for building great WEB applications. Using the tutorials, you can quickly familiarize yourself with the basic usage and usage scenarios of these APIs, and provide an online presentation that shows the intuitive application situation.

You may also like

• Dazzling HTML5 and JavaScript effects
• Share 35 very good HTML5 web games
• Nine amazing HTML5 and JavaScript experiments
• 20 stunning HTML5 Canvas application trials
• 12 stunning HTML5 and CSS3 application examples

[Reprint] You may not know the 5 powerful HTML5 API--HTML5 series