html 5 api
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a step in the right direction. I recently shared with you 5 HTML5 APIs You Didn't Know Existed in the hope that some of them would inspire you to improve your own web apps. I'd like to share with you 5 more lessor known HTML5 APIs -- hopefully you find some of them useful!
HTML5革命为我们提供了一些很棒JavaScript和HTML API。 一些是我们知道我们需要多年的API，另一些是尖端的移动和桌面助手。 无论API的强度或目的如何，任何有助于我们更好地完成工作的事情都是朝着正确方向迈出的一步。 我最近与您分享了5个您不知道HTML5 API ，希望其中一些可以激励您改善自己的Web应用程序。 我想与您分享另外5个鲜为人知HTML5 API，希望您发现其中一些有用！
全屏API (Fullscreen API)
The awesome Fullscreen API allows developers to programmatically launch the browser into fullscreen mode, pending user approval:
令人敬畏的全屏API使开发人员能够以编程方式将浏览器启动为全屏模式，等待用户批准：
// Find the right method, call on correct element
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// Launch fullscreen for browsers that support it!
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element
Any element can be pushed to fullscreen, and there's even a CSS pseudo-class to allow some control over the screen while in fullscreen mode. This API is especially useful for JavaScript game development; especially first person shooters like BananaBread!
任何元素都可以推送到全屏模式，甚至还有CSS伪类，可以在全屏模式下对屏幕进行一些控制。 该API对JavaScript游戏开发特别有用。 特别是像BananaBread这样的第一人称射击游戏！
页面可见性API (Page Visibility API)
The Page Visibility API provides developers an event to listen in on, telling developers when the user focuses on a page's tab, and also when the user moves to another tab or window:
Page Visibility API为开发人员提供了一个监听事件，告诉开发人员用户何时关注页面的标签，以及用户何时移至另一个标签或窗口：
// Adapted slightly from Sam Dutton
// Set name of hidden property and visibility change event
// 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";
}
// Add a listener that constantly changes the title
document.addEventListener(visibilityChange, function(e) {
// Start or stop processing depending on state
}, false);
When used properly, a developer can avoid expensive tasks (like AJAX polling or animating) when the tab isn't in focus.
如果使用得当，开发人员可以在标签不突出时避免执行昂贵的任务(例如AJAX轮询或动画)。
getUserMedia API (getUserMedia API)
The getUserMedia API is incredibly interesting; this API provides access to device media, like your MacBook's camera! Using this API, the <video> tag, and canvas, you can take beautiful photos within your browser!
getUserMedia API非常有趣。 此API提供对设备媒体的访问，例如MacBook的相机！ 使用此API，<video>标签和画布，您可以在浏览器中拍摄漂亮的照片！
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
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);
};
// Put video listeners into place
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);
Look forward to using this API quite a bit in the future -- interactivity within the browser will be the norm a year from now!
期待将来会大量使用此API-从现在开始，浏览器之间的交互性将成为常态！
电池API (Battery API)
The Battery API has been updated; read JavaScript Battery API Update to see the new code pattern!
Battery API已更新； 阅读JavaScript Battery API Update ，查看新的代码模式！
The Battery API is obviously a mobile-targeted API providing insight into the device's battery level and status:
Battery API显然是以移动设备为目标的API，可深入了解设备的电池电量和状态：
// Get the battery!
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
// A few useful battery properties
console.warn("Battery charging: ", battery.charging); // true
console.warn("Battery level: ", battery.level); // 0.58
console.warn("Battery discharging time: ", battery.dischargingTime);
// Add a few event listeners
battery.addEventListener("chargingchange", function(e) {
console.warn("Battery charge change: ", battery.charging);
}, false);
Knowing battery API and status can signal to the web application not to use battery-intensive processes and the like. Not a groundbreaking API but surely a helpful one.
知道电池API和状态可以向Web应用程序发出信号，使其不使用电池密集型过程等。 这不是开创性的API，但肯定是有用的。
链接预取 (Link Prefetching)
Link prefetching allows developers to silently preload site contents to project a more fluid, seamless web experience:
链接预取允许开发人员以静默方式预加载站点内容，以投射出更加流畅，无缝的Web体验：
<!-- full page -->
<link rel="prefetch" href="https://davidwalsh.name/css-enhancements-user-experience" />
<!-- just an image -->
<link rel="prefetch" href="https://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
There's five more HTML5 APIs to research and tinker with. Keep in mind that these APIs will be used widely in a few years, so the sooner you get acquainted with them, the better you'll be equipped to create world-class web applications. Take a few moments to explore these APIs and see what you can put together!
还有五种HTML5 API可供研究和修改。 请记住，这些API将会在几年内得到广泛使用，因此，您越早熟悉它们，就越有能力创建世界一流的Web应用程序。 花一些时间来探索这些API，看看可以将它们放在一起！
html 5 api
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
