网站开发得意于技术不断更新，在HTML5的革命已经给我们提供了一些真棒JavaScript和HTML的API。有些是我们多年来已经知道需要的API，而另一些则是尖端的移动和桌面助手。无论API的强度或目的如何，任何可以帮助我们更好地完成工作的事情都是朝着正确方向迈出的一步。我最近与您分享了 5个您不知道的HTML5 API  ，希望其中一些可以激发您改进自己的Web应用程序。我想与您分享另外5个鲜为人知的HTML5 API-希望您发现其中一些有用！

全屏API
令人敬畏的全屏API使开发人员能够以编程方式将浏览器启动为全屏模式，等待用户批准：

//找到正确的元素上正确的方法，调用
函数 launchFullScreen （元素） {
  如果（元素。 requestFullScreen ） {
    元素。requestFullScreen （）; 
  } 否则 如果（元件。 mozRequestFullScreen ） {
    元件。mozRequestFullScreen （）; 
  } 否则 如果（元件。 webkitRequestFullScreen ） {
    元件。webkitRequestFullScreen （）; 
  } 
}

//为支持它的浏览器启动全屏！
launchFullScreen （文件。 documentElement ）;  //整个页面
launchFullScreen （文件。的getElementById （“videoElement” ）） ; //任何单个元素 

任何元素都可以推送到全屏模式，甚至还有CSS伪类，可以在全屏模式下对屏幕进行一些控制。该API对JavaScript游戏开发特别有用。


页面可见性API
在网页浏览权限API为开发人员提供一个事件来偷听，当用户聚焦在页面的标签，告诉开发者，以及当用户移动到另一个标签或窗口：

//略微改编自Sam Dutton 
//设置隐藏属性的名称和可见性更改事件
// //由于某些浏览器仅提供供应商前缀支持的
var hidden ， state ， visibleChange ； 
如果 （typeof运算文件。隐藏！==  “未定义” ） {
  隐藏=  “隐藏的” ; 
  visibleChange =  “ visibilitychange” ；
  state =  “ visibilityState” ; 
}  else  if  （typeof document 。mozHidden ！==  “ undefined” ） {
  隐藏=  “ mozHidden” ; 
  visibilityChange =  “mozvisibilitychange” ; 
  state =  “ mozVisibilityState” ; 
} 否则 如果 （typeof运算文件。 msHidden ==！  “未定义” ） {
  隐藏=  “msHidden” ; 
  visibilityChange =  “msvisibilitychange” ; 
  state =  “ msVisibilityState” ;
   typeof运算文件。webkitHidden ！==  “未定义” ） {
  隐藏=  “ webkitHidden” ; 
  visibilityChange =  “webkitvisibilitychange” ; 
  state =  “ webkitVisibilityState” ; 
}

//添加一个不断更改标题
文档的侦听器。addEventListener （ visibleChange ， function （ e ） { 
  //根据状态开始或停止处理

} ， false ）;

getUserMedia API
该getUserMedia API是非常有趣的; 此API提供对设备媒体的访问，例如MacBook的相机！使用此API，<video>标签和画布，您可以在浏览器中拍摄漂亮的照片！

//将事件侦听器放入位置
窗口。的addEventListener （“DOMContentLoaded” ， 函数（） { 
  //抓斗元素，创建设置等
  VAR帆布=文档。的getElementById （“画布” ），
    上下文=画布。的getContext （“2D” ），
    视频=文档。的getElementById （“ video“ ）， 
    videoObj = { ” video“  ： true  } ， 
    errBack =  function （ error ） {
      控制台。日志（“视频捕获错误：” ，错误。代码）； 
    } ;

  //使视频听众到位
  ，如果（领航员。 getUserMedia ） {  //标准
    导航。getUserMedia （ videoObj ， 函数（流） {
      视频。 SRC =流;
      视频。播放（）; 
    } ， errback可）; 
  } 否则 如果（领航员。 webkitGetUserMedia ） {  // WebKit的前缀
    导航器。webkitGetUserMedia （ videoObj ， 函数（流）{
      视频。 SRC =窗口。 webkitURL 。createObjectURL （流）;
      视频。播放（）; 
    } ， errback可）; 
  } 
} ， false ）;

电池API
Battery API已更新；阅读JavaScript Battery API Update，以查看新的代码模式！

该电池API显然是一个移动目标的API提供洞察设备的电池电量和状态：

//获取电池！
var battery =导航器。电池|| 导航器。webkitBattery || 导航器。mozBattery ;

//一些有用的电池属性
控制台。警告（“电池充电：” ，电池。充电）;  //真正的
控制台。警告（“电池电平” ，电池。级）;  // 0.58
控制台。警告（“电池放电时间：” ，电池。 dischargingTime ）;

//添加一些事件监听器
电池。的addEventListener （“chargingchange” ， 功能（ ê ） {
  控制台。警告（“电池电荷变化：” ，电池。充电）; 
} ， 假）;
知道电池API和状态可以向Web应用程序发出信号，使其不使用电池密集型过程等。这不是开创性的API，但肯定是有用的API。

链接预取
链接预取允许开发人员以静默方式预加载站点内容，以投射出更加流畅，无缝的Web体验：

<！-整页-> 
<链接 rel = “ prefetch ”  href = “ https://davidwalsh.name/css-enhancements-user-experience ”  />

<！ -只是一个图像- > 
<链路 相对= “预取”  HREF = “ https://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png