你可能不知道的5个功能强大的 HTML5 API

　　HTML5 新增了许多重要的特性，像 video、audio 和 canvas 等等，这些特性使得可以很容易的网页中包含多媒体内容，而不须要任何的插件或者 API。而其它的新元素，例如 section、article、header 和 nav 等则是用来丰富网页内容。另外还有不少强大的 JavaScript API，下面这5个 HTML5 API 你可能不知道，经过今天这篇文章能够了解一下。

Fullscreen API

　　这个 HTML5 全屏 API 让 Web 开发者能够经过编程控制页面的全屏显示。这个 API 对于 JavaScript 游戏开发特别有用，例如这款单人射击游戏 BananaBread，在全屏状态下玩那是至关酷。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

　　使用教程   在线演示

 

Page Visibility API

　　Page Visibility API 能够帮助开发者监听用户的焦点在哪一个页面选项卡上面以及用户在选项库或者窗口之间的移动状况。若是使用合理的话，当焦点不在某个页面上的时候能够中止一些消耗很大的任务。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

// 部分浏览器只支持 vendor-prefixed // 根据浏览器支持状况设置隐藏属性和可见状态改变事件 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" ; }   // 添加一个时间来实时改变页面的标题 document.addEventListener(visibilityChange, function (e) {    // Start or stop processing depending on state }, false );

　　使用教程   在线演示

 

getUserMedia API

　　特别有趣的一个 API，可以调用电脑的摄像头，结合 <video> 标签和 Canvas 就能在浏览器中拍摄照片了。将来这个 API 将被普遍用来让浏览器和用户之间互动。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// 添加事件监听器 window.addEventListener( "DOMContentLoaded" , function () {    // 获取元素，建立配置    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);      };      // 添加视频监听器    if (navigator.getUserMedia) { // 标准的API      navigator.getUserMedia(videoObj, function (stream) {        video.src = stream;        video.play();      }, errBack);    } else  if (navigator.webkitGetUserMedia) { // WebKit 核心的API      navigator.webkitGetUserMedia(videoObj, function (stream){        video.src = window.webkitURL.createObjectURL(stream);        video.play();      }, errBack);    } }, false );

　　使用教程   在线演示

 

Battery API

　　顾名思义，这是一个电池 API ，明显是为移动设备准备的，用于监控电池的状态。可以经过事件监听电池电量的变化，电池的等级、可用时间等状态。下面是是示例代码，能够经过后面的教程连接学习更详细的使用方法。

1 2 3 4 5 6 7 8 9 10 11 12

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

　　使用教程

 

Link Prefetching

　　这个连接预取 API 很是有用，让开发者能够控制网页资源在后台安静的预先加载，这样用户在浏览网站或者使用 Web 应用程序的时候可以有流畅的使用体验。能够预加载整个页面，也能够是单个资源，示例代码以下：

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

　　使用教程

 

　　上面这5个 HTML5 API 值得关注，在不久的未来这些 API 将被普遍的使用，所以越早掌握它们能够帮助你为构建优秀的 Web 应用打下坚实的基础。经过使用教程能够快速的熟悉这些 API 的基本用法和使用场景，提供的在线演示展现了直观的应用状况。