[转]你可能不知道的五个强大HTML5 API
一、全屏
// 找到适合浏览器的全屏方法
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
二、页面可见性:判断用户是否正在浏览
// 设置隐藏属性和可见改变事件的名称,属性需要加浏览器前缀
// 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);
三、使用麦克风和摄像头
// 设置事件监听器
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);
四、电池
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);
五、prefetch预先加载
<!-- full page -->
<link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /> <!-- just an image -->
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
转载于:https://www.cnblogs.com/weiyinfu/p/10657778.html
[转]你可能不知道的五个强大HTML5 API相关推荐
- 大部分人不知道的 5 个强大HTML5 API
HTML5提供了一些非常强大的JavaScript和HTML API,来帮助开发者构建精彩的桌面和移动应用程序.本文将介绍5个新型的API,希望对你的开发工作有所帮助. 全屏API 该API允许开发者 ...
- 苹果手机小技巧大全计算机,80%的人都不知道的五个iPhone实用小技巧,不知道的话赶紧看看...
原标题:80%的人都不知道的五个iPhone实用小技巧,不知道的话赶紧看看 现在越来越多的人使用iPhone手机,而且iPhone新机也是出了一段时间了,但是还是有很多人不知道iPhone中的一些隐藏 ...
- 同步器 java_您可能不知道的五个高级Java同步器
同步器 java 除了基于每个Java对象具有的锁定位的通用同步外,您还可以使用Java中更复杂的同步器,例如: 信号量 –使用许可的概念表示一个位置中允许的最大线程数. 当使用值1时,其行为类似于同 ...
- 您可能不知道的五个高级Java同步器
除了基于每个Java对象具有的锁定位的通用同步外,您还可以使用Java中更复杂的同步器,例如: 信号量 –使用许可的概念表示一个位置中允许的最大线程数. 当使用值1时,其行为类似于同步,也称为二进制信 ...
- 阴阳师服务器维护结界卡暂停吗,阴阳师关于BUFF暂停 不能不知道的五件事
阴阳师BUFF暂停功能已经正式上线啦,从此之后肝御魂打大蛇带狗粮.加成在手随开随停!哪些种类的加成可以暂停?在哪里找暂停按钮?暂停有时间限制吗?有次数限制吗?下面就为大家一一解答. 温馨提示:快速查询 ...
- python装饰器有几种_Python装饰器使用你可能不知道的几种姿势
前言 在Python中,装饰器是一种十分强大并且好用的语法,一些重复的代码使用装饰器语法的话能够使代码更容易理解及阅读. 因此在这里简单总结了一下Python中装饰器的几种用法以及需要注意的事情. 一 ...
- 异步height:calc_异步:您尚不知道的承诺(第1部分)
异步height:calc This is a multi-part blog post series highlighting the capabilities of asynquence, a p ...
- 高手才知道!七个你所不知道的 D3.js 秘技
D3.js ,当前最火红的视觉化套件,你用过了吗?越来越多人使用 D3.js 来开发视觉化专题,但- 你对 D3.js 的了解又到哪里呢?这次我们就带大家一起来看看一些 D3.js 很重要.大家却又普 ...
- 考csp所需算法_CSP vs RxJS:您所不知道的。
考csp所需算法 by Kevin Ghadyani 通过凯文·加迪亚尼(Kevin Ghadyani) CSP vs RxJS:您所不知道的. (CSP vs RxJS: what you don' ...
最新文章
- 快速记忆python函数-让Python程序快速提升30%的技巧
- java 对象图_Java对象内存图
- canvas图形编辑器
- 将json字符串转换为json对象
- python高效开发实战配套源文件_分享12个python使用技巧,助你轻松掌握Python高效开发...
- Python 三元表达式、列表推导式、生成器表达式
- JavaScript基本类型值和引用类型值的复制问题
- 【Android基础】android shape详解
- bzoj 1078 [SCOI2008]斜堆 —— 斜堆
- Intel Quick Sync Video Encoder 2
- hadoop2.X如何将namenode与SecondaryNameNode分开配置
- Linux USB总线驱动框架分析
- 详解WSAEventSelect网络模型
- Multisim实现极简数码管显示
- mac mini 储存文件的服务器,另一种“NAS”的玩法---mac系统的远程管理和文件共享...
- antd vue实现日历功能——添加放假时间功能——基础积累
- CAD如何编辑多段线的顶点信息
- 直播预告 | 哈工大HIT-SCIR实验室专场二
- rabbitMQ guest账号登录总是提示失败
- 通讯方式:近场通讯和无线通讯
热门文章
- 入参为字符串用日期对象接收
- 为什么选用自增量作为主键索引
- 2019 牛客多校第9场 B	Quadratic equation(二次剩余)
- Unity Lighting(一)光照练习
- 用Eclipse 搭建一个Maven Spring SpringMVC 项目
- 通过Git进行分支管理
- cpu核心电压:不一定是1.55伏特 : 全体到齐!200 mhz fsb的p4处理器与i875p双通道ddr400芯片组...
- 【Golang 快速入门】项目实战:即时通信系统
- git提示(拷贝密钥问题)“Load key /home/devid/.ssh/id_rsa: bad permissions”
- 检验mysql安装成功win7,手把手教你win7系统成功安装 RMySQL的处理对策