HTML5的诞生给我们提供了很多精彩的JavaScript和HTML新功能和新特征。有些新特征我们已知多年并大量的使用，而另外一些主要是用在前沿的手机移动技术上，或者桌面应用中起辅助作用。不管这些HTML5新功能有多强大，多好用，它们都是为了帮助我们更好的开发浏览器前端应用。我之前给大家分享过一篇你不知道的5个HTML5新功能，目的是希望里面的提到的一些技术能帮助改进你的web应用。这里我还想分享给大家一些少有人知道的HTML5新功能，希望能对你有些用处！
一、全屏API接口
强大的全屏API接口能让程序员通过编程启动浏览器进入全屏模式，并请求用户的允许：
任何页面元素都可以成为全屏输出的目标，HTML5里甚至还提供了一个CSS伪类来让程序员在浏览器全屏时控制全屏元素的样式。当你在开发游戏时这个全屏API接口特别有用；尤其像BananaBread这样的枪击游戏中。
学习地址： http://www.webhek.com/fullscreen/
二、页面可见性API接口
页面可见性API接口提供给用了一个监听事件，这个事件能告诉程序员当前页面是否是用浏览器中激活的标签页/窗口、是否是用户正在观看的页面，它还能告诉程序员用户何时切换页面、不再观看本页面/窗口：
学习地址： http://www.webhek.com/page-visibility/
三、getUserMedia接口API
getUserMedia API是个非常有趣的接口！使用这个API，加上<video>和<canvas>标记，你可以在浏览器里进行拍照！
学习地址： http://www.webhek.com/browser-camera/
四、电池接口API
电池接口API很显然是专门为手机里的浏览器应用设计的，它提供了读取设备里的电池电量和充电状态的功能：
学习地址： http://www.webhek.com/battery-api/
五、页面预加载(Link prefetch)API
页面预加载(Link prefetch)API功能能够让浏览器在后台静悄悄的预先加载/读取一些页面或资源到当前页面，给用户一个顺滑的使用体验：
学习地址： http://www.webhek.com/link-prefetch/
一、全屏API接口
强大的全屏API接口能让程序员通过编程启动浏览器进入全屏模式，并请求用户的允许：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 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
|
任何页面元素都可以成为全屏输出的目标，HTML5里甚至还提供了一个CSS伪类来让程序员在浏览器全屏时控制全屏元素的样式。当你在开发游戏时这个全屏API接口特别有用；尤其像BananaBread这样的枪击游戏中。
学习地址： http://www.webhek.com/fullscreen/
二、页面可见性API接口
页面可见性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
26
27
|
// 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
);
|
学习地址： http://www.webhek.com/page-visibility/
三、getUserMedia接口API
getUserMedia API是个非常有趣的接口！使用这个API，加上<video>和<canvas>标记，你可以在浏览器里进行拍照！
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
// 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
);
|
学习地址： http://www.webhek.com/browser-camera/
四、电池接口API
电池接口API很显然是专门为手机里的浏览器应用设计的，它提供了读取设备里的电池电量和充电状态的功能：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 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
);
|
学习地址： http://www.webhek.com/battery-api/
五、页面预加载(Link prefetch)API
页面预加载(Link prefetch)API功能能够让浏览器在后台静悄悄的预先加载/读取一些页面或资源到当前页面，给用户一个顺滑的使用体验：
|
1
2
3
4
5
|
<!-- 预加载一个页面 -->
<link rel=
"prefetch"
href=
"http://www.webhek.com/link-prefetch/"
/>
<!-- 预加载一个图片 -->
<link rel=
"prefetch"
href=
"http://www.webhek.com/wordpress/wp-content/themes/webhek2/images/follow-us.jpg"
/>
|
学习地址： http://www.webhek.com/link-prefetch/
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
