以下是之前学习的一些HTML5 API的总结,在HTML5中有许多功能和接口很值得我们去了解和学习。
该API可以用来检测页面对于用户的 可见性
,即返回用户当前浏览的页面或标签tap的状态变化。 在最小化浏览器、切换tap页面时生效.(如需对app中几个webview进行切换操作时,可使用pageVisibility接口进行相应的事件监听和处理。)
【document.hidden】
该值表示page是否是可见的,值为boolean值
【document.visibilityState】
这个visibilitystate 可有三个值得可能:
【visible】 表示该page是处于最前面的页面并且不是处于一个最小化的窗口
【hidden】 表示该page不是处于最前面的页面或者是处于一个最小化的窗口
【prerender】 表示该页面内容正在重新渲染并且该页面对于用户是不可见的
【isibilitychange Event】
*监听window visibility 的改变的事件
// 设置隐藏属性和可见改变事件的名称,属性需要加浏览器前缀 // 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);
对于visibility的改变,我们可以怎么用了做什么呢。
该API允许开发者以编程方式将Web应用程序 全屏
运行,使Web应用程序更像本地应用程序。十分简单有用的api.
FullScreen 的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
// Whack fullscreenfunction exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } // Cancel fullscreen for browsers that support it! exitFullscreen();
目前fullscreen 仍存在兼容的问题,许多能使用的浏览器仍需要在其相应的属性和事件加相关的前缀。
【document.fullScreenElement】
该属性表示启动全屏的元素(如 video这些)
【document.fullScreenEnabled】
该属性表示当前是否全屏
【fullscreenchange 事件】
监听全屏状态改变的事件
css有一些关于fullscreen的css属性
:-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen, :full-screen { /*pre-spec */ /* properties */ } :fullscreen { /* spec */ /* properties */ } /* deeper elements */:-webkit-full-screen video { width: 100%; height: 100%; } /* styling the backdrop*/::backdrop { /* properties */ } ::-ms-backdrop { /* properties */ }
第一次见到这个API是在看一些手机小说和移动端漫画网站时,发现其有全屏的观看的功能。全屏api目前可能存在兼容性的问题,但相信不久的将来肯定会是一个使用频率超高的api
该API允许Web应用程序访问摄像头和麦克风,而无需使用插件,该API在客户端最先支持的,但在pc端仍不可用。
先阅读下下面的html
<!-- 正常正确情况下,使用video等元素,我们是需要在确认客户端是支持该元素时才 回相应地用js创建这些元素,但通过使用getUserMedia api, 我们即可在html中直接创建这些元素(而不需要用js来创建), --> <video id="video" width="640" height="480" autoplay></video> <button id="snap">Snap Photo</button> <canvas id="canvas" width="640" height="480"></canvas>
// 设置事件监听器 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);
一旦确定当前浏览器是支持getUserMedia的时, 我们可以同简单的方法将当前我们的video元素的src视频地址赋值给用户手机本地的video,然后通过video的play方法拉起本地video的启动和连接。这样的话我们就可以使用本地的播放器来播放。
这是一个针对移动设备应用程序的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);
为什么我们需要用到battery api?现在许多移动端apps都内嵌着web浏览器包装的(不再是完全native的应用)。所以我们需要一个方法去获取系统的信息,app有一些过程是 `十分耗电
的,然后我们就需要在用户启动时给用户一些 警告信息
告诉用户当前设备电量较低。这是一个十分重要简单的api.相应在不久的将来会发挥应有的作用。
预加载网页内容为浏览者提供一个平滑的浏览体验。这个api我们在业务偶尔也会使用到
Link prefetching 是利用浏览器最佳的时间去下载或者预加载一些用户可能将会在不久将来浏览的文档的一种浏览器机制。
<!-- 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" />