资讯频道 → Web前端
阅读更多

8顶
0踩

Web前端

原创新闻 你可能不知道的 5 个强大的 HTML5 API

2012-11-09 16:08 by 副主编 wangguo 评论(4) 有72845人浏览
HTML5 API javascript web

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

HTML5提供了一些非常强大的JavaScript和HTML API，来帮助开发者构建精彩的桌面和移动应用程序。本文将介绍5个新型的API，希望对你的开发工作有所帮助。

1.  全屏API（Fullscreen API）

该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。 

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

教程 / 演示

2.  页面可见性API（Page Visibility API）

该API可以用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签的状态变化。 

// 设置隐藏属性和可见改变事件的名称，属性需要加浏览器前缀
// 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);

教程 / 演示

3.  getUserMedia API

该API允许Web应用程序访问摄像头和麦克风，而无需使用插件。 

// 设置事件监听器
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);

教程 / 演示

4.  电池API（Battery API）

这是一个针对移动设备应用程序的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);

教程

5.  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" />

教程

原文：5 More HTML5 APIs You Didn’t Know Existed
8
顶
0
踩
评论 共 4 条 请登录后发表评论
4 楼 shipeifei_gonghe 2016-11-02 14:53
总结的不错，支持一下，另外推荐一个比较全面的文章：http://www.68kejian.com/app/course.html?id=94&&c=34&&name=HTML5%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E4%B8%83
3 楼 wade200 2014-03-19 10:13
支持 就是还不怎么会
2 楼 zhongmin2012 2012-11-12 15:20
期待中ing，挂起一股学习热潮
1 楼 c297186864 2012-11-12 11:43
虽然还没用上html5 但是还是支持下  期待html5盛行

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 小白兔和小灰兔【爱情故事系列&暖暖的很贴心】

    侵权请联系我删除！ 小白兔开心的给小灰兔打电话，我想你了。 小灰兔问，有多想？ 小白兔说，想了足足有9次。 小灰兔遗憾的说，哎，你还要努力啊，今天又欠了我1次，我想了你足足10次。 小白兔笑着说，你想我的质量肯定没有我想你的质量高？ 小灰兔问，为什么？ 小白兔说，打开窗户，我在你家门口，想你就要来见见你呀。 2 小熊问小白兔，是不是，你一想人家就跑去见他，时间久了，这爱就不平衡了？ 小白兔笑着说，...

  • 分享点好笑的---小白兔的故事系列

          今天是小白兔系列的开始,小白兔是世界上笑话最多的禽兽,呵呵<br />一只狗熊在树林里大便,过来一只兔子,他问兔子:”掉毛吗?”兔子想了想说:”不掉毛!”狗熊抽了口烟又问:”掉毛吗?兔子看了眼狗熊说:”不掉毛!”狗熊用怀疑的眼光看了一眼兔子,又问:”真的不掉毛?”兔子不耐烦的吼到:”不掉毛就是不掉毛!!!”话音未落,狗熊一把抓起兔子说…”抱歉,忘带纸了”

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

    原文地址： 5 More HTML5 APIs You ...HTML5 已经给我们提供了许多好用的JavaScript以及HTML API.其中一些是我们期待了许多年的，而另外一些是为移动和桌面开发者准备的。不管这些API出于什么目的而推出，只要能帮我

  • HTML5新特性（新元素、更强大的forms、整合的API）

    对html5新特性进行简单介绍

  • 浅谈HTML5中的Canvas基本绘图API简易封装和使用(一)

    今天我们就来一起看下HTML5一些常用的API,个人根据实际的使用把它再次进行一次封装，使用起来感觉更方便，可能封装的不全面，但是这个个人感觉后期可以自动添加，主要给自己复习使用，第一次发H5博客，菜鸟一枚，...

  • HTML5 全屏 API

    翻译人员: 铁锚 原文日期: 2013年12月23日 ...FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全

  • HTML5详细介绍及使用

    HTML5详细介绍及使用 一、HTML5简介 1、HMTL5的定义 在W3C中的定义：HTML 5 是下一代的 HTML，设计HTML5最初目的是为了在移动设备上支持多媒体。HTML5规范于2014年10月29日由万维网联盟正式宣布，HTML是万维网最...

  • 自动化运维（使用api自动化管理f5设备）

    使用API接口，自动化巡检F5负载均衡设备前言F5 的API接口关于认证利用python实现自动化巡检成果 前言 目前公司的监控系统监控项比较粗略，无法监控如F5设备集群状态、主备机配置同步状态等信息。 利用F5设备自带的...

  • 对HTML5 Device API相关规范的解惑

    在HTML5中，Device API相关内容众多，而且结构比较复杂，内容有所重叠，大家在使用时可能会遇到许多问题，下面我针对这些问题谈一下个人的理解。1、The Media CaptureAPI VS System Information API，两者都可以访问...

  • html5+JS调用摄像头示例

    本文主要介绍了：一、html5+JS使用navigator.MediaDevices调用摄像头截图； 二、HTML5+JS使用MediaRecorder录制视频

  • HTML5视频直播及H5直播扫盲

    分享内容简介： 目前视频直播，尤其是移动端的视频直播已经火到不行了，基本上各大互联网公司都有了自己的直播产品，所以对于直播的一些基本知识和主要...1. 怎样利用 HTML5 来播放直播视频 2. 怎样录制直播视频 3.

  • HTML5 Web Speech API——通过语音输入文字

    Speech API，现在Chrome刚刚发布的25版本已经为桌面和Android提供了对此API的支持，这对Web开发者来说无疑是一个具有里程碑意义的事件，因为我们可以直接在Web App中原生使用语音识别技术，Web应用的新时代将会...

  • 介绍HTML5

    HTML 被称为超文本标记语言，网页文档归根结底也是一个文本文档，我们甚至可以用“记事本”来编写或查看网页文档，但要更好的编写网页脚本，实现网页开发，还你需要选择一种功能强大的编辑工具，下面就介

  • 强大的 Apipost 要取代 Postman 了吗？

    Apipost 是国人开发的，基于协作，更懂中国程序员，不止于 API 文档，调试，Mock。Apipost = Postman + Swagger + Mock。它支持后端，前端，测试同时在线编辑，内容实时同步，非常适合团队协作开发。

  • 使用HTML5抓取 Audio & Video

    原文地址: http://www.html5rocks.com/en/tutorials/getusermedia/intro/  本地化的文章: http://www.html5rocks.com/zh/tutorials/getusermedia/intro/ 其中已经有中文版本的本地化内容,点击 本地化 下面的 ...

  • 15个最佳HTML5视频播放器

    随着YouTube最近的一项政策变化，即要求创作者... 无论您是YouTube创作者还是有抱负的电影导演，这份15个最佳HTML5视频播放器列表都将帮助您开始开发以视频为中心的网站。 您最需要什么功能？ 一个简单的球员？ ...

  • 【前端面试题】01—42道常见的HTML5面试题(附答案)

    但在面试中，HTML5部分的面试题主要考察应试者对HTML5API的掌握情况，这是HTML5的重点，也正是这些API推动了前端的发展。 这些新技术早已应用在很多大型项目中。 有些人认为HTML5只是新增了一些语义化HTML标签，...

  • 使用HTML5 API(AudioContext)实现可视化频谱效果

    HTML5 可视化频谱效果如今的HTML5技术正让网页变得越来越强大，通过其Canvas标签与AudioContext对象可以轻松实现之前在Flash或Native App中才能实现的频谱指示器的功能。

  • HTML5前端知识图谱

    HTML5知识图谱HTML5知识概要 HTML5知识概要

  • HTML5 Plus移动App(5+App)开发入门指南

    HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。 HTML5 Plus规范 通过HTML5开发移动...

Global site tag (gtag.js) - Google Analytics