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

　　HTML5 新增了许多重要的特性，像 video、audio 和 canvas 等等，这些特性使得能够很容易的网页中包含多媒体内容，而不需要任何的插件或者 API。而其它的新元素，例如 section、article、header 和 nav 等则是用来丰富网页内容。另外还有很多强大的 JavaScript API，下面这5个 HTML5 API 你可能不知道，通过今天这篇文章可以了解一下。

Fullscreen API

　　这个 HTML5 全屏 API 让 Web 开发者可以通过编程控制页面的全屏显示。这个 API 对于 JavaScript 游戏开发特别有用，例如这款单人射击游戏 BananaBread，在全屏状态下玩那是相当酷。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

// 根据目标元素调用相应的方法

function launchFullScreen(element) {

  if(element.requestFullScreen) {

    element.requestFullScreen();

  } else if(element.mozRequestFullScreen) {

    element.mozRequestFullScreen();

  } else if(element.webkitRequestFullScreen) {

    element.webkitRequestFullScreen();

  }

}

// 在支持的浏览器中启动全屏

launchFullScreen(document.documentElement); // 整个页面

launchFullScreen(document.getElementById("videoElement")); // 单个元素

　　使用教程   在线演示

Page Visibility API

　　Page Visibility API 可以帮助开发者监听用户的焦点在哪个页面选项卡上面以及用户在选项库或者窗口之间的移动情况。如果使用合理的话，当焦点不在某个页面上的时候可以停止一些消耗很大的任务。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

// 部分浏览器只支持 vendor-prefixed

// 根据浏览器支持情况设置隐藏属性和可见状态改变事件

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) {

  // Start or stop processing depending on state

}, false);

　　使用教程   在线演示

getUserMedia API

　　特别有趣的一个 API，能够调用电脑的摄像头，结合 <video> 标签和 Canvas 就能在浏览器中拍摄照片了。未来这个 API 将被广泛用来让浏览器和用户之间互动。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

// 添加事件监听器

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

    };

  // 添加视频监听器

  if(navigator.getUserMedia) { // 标准的API

    navigator.getUserMedia(videoObj, function(stream) {

      video.src = stream;

      video.play();

    }, errBack);

  } else if(navigator.webkitGetUserMedia) { // WebKit 核心的API

    navigator.webkitGetUserMedia(videoObj, function(stream){

      video.src = window.webkitURL.createObjectURL(stream);

      video.play();

    }, errBack);

  }

}, false);

　　使用教程   在线演示

Battery API

　　顾名思义，这是一个电池 API ，明显是为移动设备准备的，用于监控电池的状态。能够通过事件监听电池电量的变化，电池的等级、可用时间等状态。下面是是示例代码，可以通过后面的教程链接学习更详细的使用方法。


1

2

3

4

5

6

7

8

9

10

11

12

// 获取电池对象

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

　　使用教程

Link Prefetching

　　这个链接预取 API 非常有用，让开发者可以控制网页资源在后台安静的预先加载，这样用户在浏览网站或者使用 Web 应用程序的时候能够有流畅的使用体验。可以预加载整个页面，也可以是单个资源，示例代码如下：

<!-- 预加载整个页面 -->
<link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />

<!-- 预加载一张图片 -->
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

　　使用教程

　　上面这5个 HTML5 API 值得关注，在不久的将来这些 API 将被广泛的使用，因此越早掌握它们可以帮助你为构建优秀的 Web 应用打下坚实的基础。通过使用教程可以快速的熟悉这些 API 的基本用法和使用场景，提供的在线演示展示了直观的应用情况。

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

时间： 2024-08-10 09:49:06

你可能不知道的5个功能强大的 HTML5 API的相关文章

[转载]你可能不知道的5个功能强大的 HTML5 API —— html5系列

HTML5 新增了许多重要的特性,像 video.audio 和 canvas 等等,这些特性使得能够很容易的网页中包含多媒体内容,而不需要任何的插件或者 API.而其它的新元素,例如 section.article.header 和 nav 等则是用来丰富网页内容.另外还有很多强大的 JavaScript API,下面这5个 HTML5 API 你可能不知道,通过今天这篇文章可以了解一下. Fullscreen API 这个 HTML5 全屏 API 让 Web 开发者可以通过编程控制页面的全

18个功能强大的HTML5 和JavaScript游戏引擎库

如果你想要开发一个手机游戏,相关的游戏引擎库会是你寻找的目标之一.游戏引擎库的数量成百上千,哪一款才是你需要的呢?本文为你收集了18个功能强大的HTML5 和JavaScript 游戏引擎库. 相关推荐:排名前10的H5.Js 3D游戏引擎和框架 1. Impact JS Impact JS 是最好的游戏引擎之一,它能够帮助你创建那些玩家们高度关注的复杂图形图像.Impact JS 虽然不是免费的,但是它所带来的价值绝对是物超所值的. 2. Crafty JS 第二个要说到的非常流行的Java

分享10款功能强大的HTML5/CSS3应用插件

1.纯CSS3美化Checkbox和Radiobox按钮 外观很时尚 利用CSS3我们可以打造非常具有个性化的用户表单,今天我们就利用CSS3美化Checkbox复选框和Radiobox单选框.CSS3美化Checkbox和Radiobox的原理很简单,在页面上新建一个checkbox和radiobox并给予他们默认的label标签显示文字,然后将checkbox和radiobox隐藏,再利用CSS3来美化label标签,这样,我们就自定义了checkbox和radiobox,外观很时尚. 在线

基于HTML5功能强大的滑块幻灯片

分享一款功能强大的HTML5滑块幻灯片.这是一款基于jQuery+HTML5实现的图片切换幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="welcome"> <div class="container"> <div class="row"> <div class="col-md-12 a"> <div id=&

你所不知道的html5与html中的那些事（二）

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作都可以达到真正的云方式呢?这一系列的问题你是否已经想明白了呢? 本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如:html5新的理念与想法,html5的新标签的用意与具体开发中场景应用,html5与css3的感情经历(用法搭配),包括html5的父亲html的一些

你可能不知道的Shell

Shell也叫做命令行界面,它是*nix操作系统下用户和计算机的交互界面.Shell这个词是指操作系统中提供访问内核服务的程序. 这篇文章向大家介绍Shell一些非广为人知.但却实用有趣的知识,权当品尝shell主食后的甜点吧. 科普 先科普几个你可能不知道的事实: Shell几乎是和Unix操作系统一起诞生,第一个Unix Shell是肯·汤普逊(Ken Thompson)以Multics上的Shell为模范在1971年改写而成,并命名Thompson sh.即便是后来流行的bash(shel

手机元件你可能不知道的那些事

据消息人士透露,富士康正玩命扩招100,000人力以满足iPhone6的量产需求,与此同时,iPhone6的公关团队又弄丢了工程样机.事实上,这个团队每年都会在iPhone上市前,或在酒吧,或在公园.或在写字楼弄丢一部宝贵的真机.从网络上流传的谍照来看,新一代iPhone势必要拉个大长脸,display尺寸有两个版本,一个是4.7英寸,一个是5.5英寸,严重违反了由果粉提出的"3.5英寸屏幕才是最好看手机"的黄金标准:后置camera由800万像素提升到1000万像素,前置VGA也有2

一些你可能不知道的JavaScript知识（知道了之后可是大大有用的哦）

1.!!将一个值方便快速转化为布尔值 console.log( !!window===true ); 2.不声明第三个变量实现交换 var a=1,b=2; a=[b,b=a][0];//执行完这句代码之后 a的值为2 b的值为1了 3.&&和||的用法 (学会了立马感觉高大尚了吧) 用代码说话吧 var day=(new Date).getDay()===0; //传统if语句 if (day) { alert('Today is Sunday!'); }; //运用逻辑与代替if da

[iOS翻译]《iOS 7 Programming Pushing the Limits》系列：你可能不知道的Objective-C技巧

简介: 如果你阅读这本书,你可能已经牢牢掌握iOS开发的基础,但这里有一些小特点和实践是许多开发者并不熟悉的,甚至有数年经验的开发者也是.在这一章里,你会学到一些很重要的开发技巧,但这仍远远不够,你还需要积累更多的实践来让你的代码更强力. /* 本文翻译自<iOS 7 Programming Pushing the Limits>一书的第三章“You May Not Know”,想体会原文精髓的朋友请支持原书正版. ——————(博客园.新浪微博)葛布林大帝 */ 目录: 一. 最好的命名实践