5个不可错过的HTML 5中的API

标签: 错过 html api | 发表时间:2012-11-10 08:54 | 作者:
出处:http://www.iteye.com
  这次接着介绍5个更多HTML 5的API。这些API还是很实用的。

1 fullscreen全屏api,可惜不是全部浏览器支持,播放视频,做游戏时有用
   

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

launchFullScreen(document.getElementById("videoElement")); //点单独的与元素时启动 




2 page visiablity页面可见性判断的API
   这个可以用来判断当用户的焦点不在当前tab的时候触发,下面这个例子,当CHROME下运行时候,如果新建立一个TAB,并且焦点到了新的tab,则会发现原来的页面的标题的title属性显示为"hidden"了
  
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);


不错的关于这个功能的详细教程:
http://davidwalsh.name/page-visibility

3 getUserMedia api 获得访问媒体设备的API
   可以允许调用用户的媒体设备,比如camera等。
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); 
    };

  // 播放
  if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia(videoObj, function(stream) {
      video.src = stream;
      video.play();
    }, errBack);
  } else if(navigator.webkitGetUserMedia) { // WebKit系列浏览器    navigator.webkitGetUserMedia(videoObj, function(stream){
      video.src = window.webkitURL.createObjectURL(stream);
      video.play();
    }, errBack);
  }
}, false);

 

  更具体的教程见:
http://davidwalsh.name/browser-camera


4 电池API
   可以获得电池的工作状态

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

    这个对移动设备很有效果,相关教程:
http://davidwalsh.name/battery-api
可惜这东西暂时只自mozilla下有效果

5 页面元素预加载 prefetch
  主要是浏览器加载完页面后,将其放到浏览器的cache中去,
<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" />

  教程:http://davidwalsh.name/html5-prefetch
  

已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [错过 html api] 推荐:

5个不可错过的HTML 5中的API

- - ITeye博客
  这次接着介绍5个更多HTML 5的API. 1 fullscreen全屏api,可惜不是全部浏览器支持,播放视频,做游戏时有用. launchFullScreen(document.documentElement); launchFullScreen(document.getElementById("videoElement")); //点单独的与元素时启动.

HTML 5中地理位置api小结

- - ITeye博客
  HTML 5提供了地理位置等一系列API可以给用户使用,方便用户制作LBS的地理应用,首先在支持HTML 5的浏览器中,当开启API时,会询问是否用户同意使用api,否则不会开启的,保证安全. 1) 开启,判断是否浏览器支持LBS api.    上面的例子中,还在displayError方法中,捕捉了异常;.

HTML 5中几种用于在客户端本地存储数据的API之间的比较

- - CSDN博客Web前端推荐文章
更多HTML 5文章请查阅 HTML 6在线网站http://www.html5online.com.cn.         本文将HTML 5中几种用于在客户端本地保存数据的API进行比较,这些API包括Web Storage API,Web SQL Database API,Indexed Database API与FileSystem API.

Api Blocking

- - xiaobaoqiu Blog
4.RateLimiter实现限流. 接口限流是保证系统稳定性的三大法宝之一(缓存, 限流, 降级).. 本文使用三种方式实现Api限流, 并提供了一个用Spring实现的Api限流的简单Demo, Demo的git地址: https://github.com/xiaobaoqiu/api-blocking.

HTML 安全列表

- 火锅土豆 - 酷壳 - CoolShell.cn
下面这个网站罗列了,几乎所有的关于HTML 5 在各种主流浏览器上的安全问题,这些安全问题很有可能将会是黑客攻击你的网上的敲门砖,他们几乎都和Javascript都有关系,你就要好好注意了. IE6,7,8,9,和Opera 8.x, 9.x, 10.x 都支持这样的语法. 这个问题会存在于所有的Firefox版本中,可以让用户进行XSS(跨站脚本)攻击.

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言( 英文:HyperText Markup Language,HTML)是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全,超赞.

html嵌套规则

- - Web前端 - ITeye博客
转载: http://www.studyofnet.com/news/412.html. 一、HTML 标签包括 块级元素(block)、内嵌元素(inline). 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签:. 一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,下面这些标签都属于内嵌元素:.

Html 转换成PDF

- - 编程语言 - ITeye博客
最近在搞一个关于html转换为pdf的需求,网上找了很多,但是如果批量处理就会出现问题,最后找到了PD4ML,解决了我的问题. String urlstring = "file:///D:/债权转让及受让协议--魏然2014-08-16.html";. 需要在src目录下创建fonts文件夹,并且在文件夹中建立pd4fonts.properties ,配置文件中的内容如下.

HTML+CSS小结 - jessies

- - 博客园_首页
   结构   HTML        .    样式   CSS      .    行为   JavaScript(交互行为).    .    网页标题.    标题.

HTML head 头标签

- - IT技术博客大学习
HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性. 移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要. 了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的.