HTML5实现全屏API【进入和退出全屏】

现在主流浏览器基本上实现了全屏效果，但是不同浏览器实现不一样：

【进入和退出全屏】

// Webkit (works in Safari5.1 and Chrome 15)

element.webkitRequestFullScreen();

document.webkitCancelFullScreen();

// Firefox 10+

element.mozRequestFullScreen();

document.mozCancelFullScreen();

// W3C 提议

element.requestFullscreen();

document.exitFullscreen();

【兼容解决方案】

1 //进入全屏
2 function requestFullScreen() {
3     var de = document.documentElement;
4     if (de.requestFullscreen) {
5         de.requestFullscreen();
6     } else if (de.mozRequestFullScreen) {
7         de.mozRequestFullScreen();
8     } else if (de.webkitRequestFullScreen) {
9         de.webkitRequestFullScreen();
10     }
11 }
12 //退出全屏
13 function exitFullscreen() {
14     var de = document;
15     if (de.exitFullscreen) {
16         de.exitFullscreen();
17     } else if (de.mozCancelFullScreen) {
18         de.mozCancelFullScreen();
19     } else if (de.webkitCancelFullScreen) {
20         de.webkitCancelFullScreen();
21     }
22 }

注：可能出于安全考虑，只能手动触发才能实现全屏，浏览器自动执行无效果。

【实例】

document.body.addEventListener('click',function(){
requestFullScreen();
//5秒钟自动退出全屏
setTimeout(function(){
exitFullscreen();
},5000);
},false);