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

标签： 知道 html5 api | 发表时间：2013-11-05 19:20 | 作者：stoneson
出处：http://blog.csdn.net

HTML5提供了一些非常强大的JavaScript和HTML API，来帮助开发者构建精彩的桌面和移动应用程序。本文将介绍5个新型的API，希望对你的开发工作有所帮助。

　　1.   全屏API（Fullscreen API）

　　该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。

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); // the whole page
launchFullScreen(document.getElementById( "videoElement" )); // any individual element

　　 教程 /  演示

　　2.   页面可见性API（Page Visibility API）

　　该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
// 设置隐藏属性和可见改变事件的名称，属性需要加浏览器前缀
// 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" ;
}
  
// 添加一个标题改变的监听器
document.addEventListener(visibilityChange, function (e) {
   // 开始或停止状态处理
}, false );

　　 教程 /  演示

　　3.   getUserMedia API

　　该API允许Web应用程序访问摄像头和麦克风，而无需使用插件。

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);
     };
  
   // 设置video监听器
   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 );

　　 教程 /  演示

　　4.   电池API（Battery API）

　　这是一个针对移动设备应用程序的API，主要用于检测设备电池信息。

1
2
3
4
5
6
7
8
9
10
11
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 );

　　 教程

　　5.   Link Prefetching

　　预加载网页内容，为浏览者提供一个平滑的浏览体验。

1
2
3
4
5
<!-- full page -->
< link rel = "prefetch" href = " http://davidwalsh.name/css-enhancements-user-experience" />
  
<!-- just an image -->

　　 教程


原文： 5 More HTML5 APIs You Didn’t Know Existed

作者：stoneson 发表于2013-11-5 11:20:57 原文链接
阅读：101 评论：0 查看评论

相关 [知道 html5 api] 推荐：

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

- - CSDN博客Web前端推荐文章
HTML5提供了一些非常强大的JavaScript和HTML API，来帮助开发者构建精彩的桌面和移动应用程序. 本文将介绍5个新型的API，希望对你的开发工作有所帮助. 　　1.   全屏API（Fullscreen API）. 　　该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序.

AT&T公布HTML5 Web应用API

- - HTML5研究小组
北京时间1月10日消息，据国外媒体报道，AT&T首席营销官大卫·克里斯托弗(David Christopher)今天在该公司第六届开发者峰会公布了面向HTML5应用的API(应用编程接口)平台API Catalog. HTML5应用可以在多种设备和移动操作系统上运行. 　　iPhone版Visual Voicemail将是AT&T的首款网络API.

HTML5全屏API之网络钓鱼

- - ria之家--RIA三部曲：jquery、ext、flex
全屏API（请参考 W3C docs和 MDN docs）允许web开发工程师使浏览器的可视区与用户屏幕区域大小一致. 像youtube上全屏观看视频的效果；或者在facebook上全屏观看图片. 其实现在大多数浏览器都有全屏功能，允许用户来设置或操作. 但HTML5的全屏API与之不同，HTML5的全屏API允许web开发工程师在程序中调用.

HTML5 Web Speech API，让网站更有趣

- - SegmentFault 最新的文章
Web API 变得越来越丰富，其中一个值得注意的是 Web Speech API. 传统的网站只能“说”，这个API的出现，让网站能“倾听”用户. 这个功能已经开放了一系列的用法，非常棒. 在这篇文章中，我们将看一下这项技术和建议的用法，以及如何用它来增强用户体验的一些好例子. 声明：本技术比较前沿，目前该规范是W3C的“非官方编辑器的征求意见稿”（截至2014年6月6日）.

HTML5 API---使用WebAudio API播放音频文件

- - CSDN博客移动开发推荐文章
WebAudio API主要是为音频文件添加音效而设计的，但是它也可以用来播放音频文件，这类似于HTML5 audio元素的功能，只是audio元素可以有控制界面，用户可以点击界面上的播放/停止按钮来控制文件的播放，也可以拖动界面上的进度条来控制播放进度. 现在如果采用WebAudio来播放音频文件就不会有该限制，开发者可以任意控制音频文件的播放和停止，这对移动平台的上游戏开发者而言尤为重要.

HTML5基础，第3部分：HTML5 API的威力

- 大尾巴狼 - 译言-电脑/网络/数码科技
来源HTML5 fundamentals, Part 3: The power of HTML5 APIs. （译者注：由于yeeyan编辑器对文章中的标签做解析的原因，我在每个标签的空格，比如说，左尖括号<+head+右尖括号>，我会写成< head>，以便其能够在文章中正确显示，不便之处敬请谅解.

HTML5全屏API在FireFox/Chrome中的显示差异

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=2679. 今天，在人人网上看同学晒得照片的时候，发现了这个按钮：. 我移了好几遍，没有 title提示. 图形也不具有代表性，一个圈圈意思是. 不敢点，点了不知道会发生什么，浏览器会不会关掉. 我思想斗争做了很久，终于弱弱地点了一下~~.

Filer.js：简化HTML5文件系统API开发的开源JS库

- - HTML5研究小组
在 W3C 的工作草案中，有一个雄心勃勃的底层 Web 标准开发计划即 HTML5 文件系统（Firesystem）API 规范. 所谓 Filesystm API 是一个提供在用户自定义的沙盒文件系统中读取与写入文件及目录的接口. 不过正如文件系统一样，该 API 代码较长而且复杂. 　　为此 Google Chorme 团队的工程师 Eric Bidelman 写了一个基于它的 JavaScript 包装库，Bidlelman 将其命名为 filer.js 并放在了 GitHub 上.

HTML5 中fullscreen 中的几个API和fullscreen欺骗

- - ITeye博客
  HTML 5中的full screen，目前可以在除IE和opera外的浏览器中使用 ，有的时候用来做. 全屏API，游戏呀，等都很有用.     作用：请求某个元素element全屏.   这里是将其中的元素ID去请求fullscreen.   如果用户在全屏模式下，则返回true.   返回当前处于全屏模式下的元素.

操纵历史，利用HTML5 History API实现无刷新跳转

- - 蓝飞技术部落格
有一次在上点点网的时候，发现登陆、注册动画效果非常华丽，但让我感到震惊的是页面竟能够实现无刷新跳转（已改版，观看此效果可以猛击此处： GitHub或 阅FM），回顾了所学的前端知识，似乎没有任何技术可以实现这一点，于是百度搜罗了一下，才发现这原来是使用HTML5中History API实现的效果，但奈何一直未曾派上用场.