文档章节

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

Y
 Yixin_Nemo
发布于 2016/11/28 13:36
字数 512
阅读 4
收藏 0

1.  全屏API(Fullscreen API) 

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

Javascript代码 

  1. // 找到适合浏览器的全屏方法  
  2. function launchFullScreen(element) {  
  3.   if(element.requestFullScreen) {  
  4.     element.requestFullScreen();  
  5.   } else if(element.mozRequestFullScreen) {  
  6.     element.mozRequestFullScreen();  
  7.   } else if(element.webkitRequestFullScreen) {  
  8.     element.webkitRequestFullScreen();  
  9.   }  
  10. }  
  11.   
  12. // 启动全屏模式  
  13. launchFullScreen(document.documentElement); // the whole page  
  14. launchFullScreen(document.getElementById("videoElement")); // any individual element  


教程 / 演示 

2.  页面可见性API(Page Visibility API) 

该API可以用来检测页面对于用户的可见性,即返回用户当前浏览的页面或标签的状态变化。 
 

Javascript代码 

  1. // 设置隐藏属性和可见改变事件的名称,属性需要加浏览器前缀  
  2. // since some browsers only offer vendor-prefixed support  
  3. var hidden, state, visibilityChange;   
  4. if (typeof document.hidden !== "undefined") {  
  5.   hidden = "hidden";  
  6.   visibilityChange = "visibilitychange";  
  7.   state = "visibilityState";  
  8. } else if (typeof document.mozHidden !== "undefined") {  
  9.   hidden = "mozHidden";  
  10.   visibilityChange = "mozvisibilitychange";  
  11.   state = "mozVisibilityState";  
  12. } else if (typeof document.msHidden !== "undefined") {  
  13.   hidden = "msHidden";  
  14.   visibilityChange = "msvisibilitychange";  
  15.   state = "msVisibilityState";  
  16. } else if (typeof document.webkitHidden !== "undefined") {  
  17.   hidden = "webkitHidden";  
  18.   visibilityChange = "webkitvisibilitychange";  
  19.   state = "webkitVisibilityState";  
  20. }  
  21.   
  22. // 添加一个标题改变的监听器  
  23. document.addEventListener(visibilityChange, function(e) {  
  24.   // 开始或停止状态处理  
  25. }, false);  


教程 / 演示 

3.  getUserMedia API 

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

Javascript代码 

  1. // 设置事件监听器  
  2. window.addEventListener("DOMContentLoaded", function() {  
  3.   // 获取元素  
  4.   var canvas = document.getElementById("canvas"),  
  5.     context = canvas.getContext("2d"),  
  6.     video = document.getElementById("video"),  
  7.     videoObj = { "video": true },  
  8.     errBack = function(error) {  
  9.       console.log("Video capture error: ", error.code);   
  10.     };  
  11.   
  12.   // 设置video监听器  
  13.   if(navigator.getUserMedia) { // Standard  
  14.     navigator.getUserMedia(videoObj, function(stream) {  
  15.       video.src = stream;  
  16.       video.play();  
  17.     }, errBack);  
  18.   } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed  
  19.     navigator.webkitGetUserMedia(videoObj, function(stream){  
  20.       video.src = window.webkitURL.createObjectURL(stream);  
  21.       video.play();  
  22.     }, errBack);  
  23.   }  
  24. }, false);  


教程 / 演示 

4.  电池API(Battery API) 

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

Javascript代码 

  1. var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;  
  2.   
  3. // 电池属性  
  4. console.warn("Battery charging: ", battery.charging); // true  
  5. console.warn("Battery level: ", battery.level); // 0.58  
  6. console.warn("Battery discharging time: ", battery.dischargingTime);  
  7.   
  8. // 添加事件监听器  
  9. battery.addEventListener("chargingchange", function(e) {  
  10.   console.warn("Battery charge change: ", battery.charging);  
  11. }, false);  


教程 

5.  Link Prefetching 

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

Html代码 

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


教程 

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

本文转载自:

共有 人打赏支持
Y
粉丝 1
博文 159
码字总数 72726
作品 0
株洲
程序员
HTML5和CSS3不仅仅是两项新的Web技术标准

HTML5和CSS3不仅仅是两项新的Web技术标准 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术。虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那...

课工场CC老师
2017/10/24
0
0
HTML5 不可限量的发展前景

现在的HTML5就像当年崭露头角时的Ajax,有人在做,但不知道叫它什么。最近,苹果在HTML5上大做文章,而著名的Web设计师Eric Meyer则提出了Web Stacks的概念。Alex Kessinger是Yahoo的一名前端...

晨曦之光
2012/03/09
0
0
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂
06/01
0
0
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周日乱弹 —— 种族不同,禁止交往

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《苏菲小姐》- 鱼果 《苏菲小姐》- 鱼果 手机党少年们想听歌,请使劲儿戳(这里) @貓夏:下大雨 正是睡觉的好时候 临睡前...

小小编辑
今天
211
6
Python 搭建简单服务器

Python动态服务器网页(需要使用WSGI接口),基本实现步骤如下: 1.等待客户端的链接,服务器会收到一个http协议的请求数据报 2.利用正则表达式对这个请求数据报进行解析(请求方式、提取出文...

代码打碟手
今天
1
0
Confluence 6 删除垃圾内容

属性(profile)垃圾 属性垃圾的定义为,一个垃圾用户在 Confluence 创建了用户,但是这个用户在自己的属性页面中添加了垃圾 URL。 如果你有很多垃圾用户在你的系统中创建了属性,你可以使用...

honeymose
今天
0
0
qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部