HTML5的这些api你知道吗?

原创 2016年06月01日 10:34:12

  以下是之前学习的一些HTML5 API的总结,在HTML5中有许多功能和接口很值得我们去了解和学习。

  页面可见性API--page Visbility

  全屏API --full Screen

  获取MediaAPI--getUserMedia

  电池API --battery

  资源预加载API--link Prefetching

  Page Visibility 页面可见性API

  该API可以用来检测页面对于用户的可见性,即返回用户当前浏览的页面或标签tap的状态变化。 在最小化浏览器、切换tap页面时生效.(如需对app中几个webview进行切换操作时,可使用pageVisibility接口进行相应的事件监听和处理。)

  page visibility的介绍

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

  page visibility的用处

  对于visibility的改变,我们可以怎么用了做什么呢。

  我们可以对那些定期刷新内容的页面进行控制,当该页面不可见则不刷新,可见则刷新

  我们还可以根据页面的是否可见来暂停和继续音频,视频的播放

  我们还可以根据页面可见去计算我们网站的用户停留在本页面的更为精确的数据,而不仅仅是打开页面而不停留在本页面。

  Full Screen API全屏API

  该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。十分简单有用的api.

  Full Screen 的介绍

  FullScreen 的API使用非常简单,其有两种模式

  Launching Fullscreen Mode 启动全屏模式

  // 找到适合浏览器的全屏方法 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

  Exit FullScreen Mode 退出全屏模式

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

  Full Screen 的相关属性和事件

  目前fullscreen 仍存在兼容的问题,许多能使用的浏览器仍需要在其相应的属性和事件加相关的前缀。

  【document.fullScreenElement】 该属性表示启动全屏的元素(如 video这些)

  【document.fullScreenEnabled】该属性表示当前是否全屏

  【fullscreenchange 事件】 监听全屏状态改变的事件

  2.2 Full Scrren 的相关

  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 */

  }

  FullScreen的小结

  第一次见到这个API是在看一些手机小说和移动端漫画网站时,发现其有全屏的观看的功能。全屏api目前可能存在兼容性的问题,但相信不久的将来肯定会是一个使用频率超高的api

  getUserMedia API

  该API允许Web应用程序访问摄像头和麦克风,而无需使用插件,该API在客户端最先支持的,但在pc端仍不可用。

  getUserMedia API 的介绍

  先阅读下下面的html

  

  

  

  

  什么时候使用link预加载是否在自己的网站使用预加载,可以参考一下几点:

  当你做的是一种类似slideshow的网页,需要提前加载近1-3张页面(假设这些页面并不大)

  预先加载在网站中许多网页都会用到的图片

  预先加载网站搜索的结果的页面

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML5新特性有哪些,你都知道吗

一、画布(Canvas) 画布是网页中的一块区域,可所以用JavaScript在上面绘图。下面我们来创建一个画布并在上面绘制一个坦克(后面将用HTML5做一个坦克大战游戏),代码如下: ...

另5个你不知道的HTML5接口API

原文地址: 5 More HTML5 APIs You Didn’t Know Existed 演示地址:全屏API Demo 原文日期: 2012年11月08日 翻译日期: 2013年08...
  • mychirs
  • mychirs
  • 2014年09月03日 08:44
  • 472

5个你可能不知道的HTML5 API

当谈到或读到 “HTML5” 相关话题时,一半的人都会感觉这玩意儿还跟独角兽一样,只能孤芳自赏。但这能怪我们么?我们看着基本 API 停滞很久了,连一个基本的特性 placeholder 都让我们等上...

你不知道的5个HTML5 API

摘要:毫无疑问,HTML5已经成为当今最流行的一门技术,尤其是Web开发者们对HTML5的兴趣是日趋浓厚。HTML5的许多功能都也能在现代浏览器中得以实现。然而,作为开发者,除了关注HTML5的功能和...
  • Jye13
  • Jye13
  • 2012年12月04日 11:53
  • 825

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

HTML5 新增了许多重要的特性,像 video、audio 和 canvas 等等,这些特性使得能够很容易的网页中包含多媒体内容,而不需要任何的插件或者 API。而其它的新元素,例如 section...

你不知道的5个HTML5 API

摘要:毫无疑问,HTML5已经成为当今最流行的一门技术,尤其是Web开发者们对HTML5的兴趣是日趋浓厚。HTML5的许多功能都也能在现代浏览器中得以实现。然而,作为开发者,除了关注HTML5的功能和...
  • roc1010
  • roc1010
  • 2012年10月15日 14:15
  • 270

HTML5的FileReader API在浏览器中一行行的读取本地文本文件

首先html代码如图: 单行读文本 Read $(function () { var lr = new LineR...
  • WuLex
  • WuLex
  • 2016年07月16日 14:52
  • 3915

html5 geolocation/ 百度地图api Geolocation 定位当前城市信息

1、根据当前所处位置 定位所在城市信息 js 百度 geolocation 定位当前城市 var geolocation = new BMap.Geolocation(); ...

html5 geolocation / 百度地图api Geolocation 定位当前城市信息

今日开端:  根据当前所处位置 定位所在城市信息    刚开始采用html5的 geolocation 来获取当前所在经纬度   折腾一番终不能获取城市信息 只能获取到当前的经纬度    查找...

HTML5 audio API的研究与学习1

HTML5 audio 1.audio sprite 音频精灵的主要思想其实跟css精灵差不多,将一个音频合成到一个音频,然后通过currentTime获取当前播放时间进行区分,不过在这里执行以下代码...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5的这些api你知道吗?
举报原因:
原因补充:

(最多只允许输入30个字)