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张页面(假设这些页面并不大)

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

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

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

你所知道的设计模式有哪些?我来给你讲常用的

你所知道的设计模式有哪些 Java中一般认为有23 种设计模式,我们不需要所有的都会,但是其中常用的几种设计模式应该去掌握。下面列出了所有的设计模式。需要掌握的设计模式我单独列出来了,当然能掌握的越多...
  • LiuHai2014csd
  • LiuHai2014csd
  • 2017年03月05日 15:52
  • 2198

一些你不知道的CSS属性

Box-sizing尽管box-sizing在CSS3中才被引入,其有一个值是border-box,让元素的高和宽包含了填充和边框。.div { width: 150px; hei...
  • u011043843
  • u011043843
  • 2015年05月14日 08:35
  • 1220

Android开发中这些小技巧你都知道吗?(一)

Activity.startActivities() 该fang
  • guxiao1201
  • guxiao1201
  • 2014年10月31日 15:38
  • 1716

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

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

5个你可能不知道的HTML5 API

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

另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
  • 486

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

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

你不知道的5个HTML5 API

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

你不知道的5个HTML5 API

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

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

原文:http://www.cnblogs.com/lhb25/archive/2012/11/15/more-html5-apis.html 你可能不知道的5个功能强大的 HTML5 API ...
  • WitsMakeMen
  • WitsMakeMen
  • 2013年12月12日 11:45
  • 1360
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5的这些api你知道吗?
举报原因:
原因补充:

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