如何使用HTML5实现全屏API

如何使用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();

//进入全屏
function requestFullScreen() {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
}
//退出全屏
function exitFullscreen() {
var de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
}

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

},false);
检查全屏状态变化 Detecting fullscreen state change
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);

document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);

css的全屏样式 Styling fullscreen
在css中，我们有几个伪类来给全屏设置样式，一般是 full-screen 这个伪类，然后会自动再全屏的时候生效

html:-moz-full-screen {
background: red;
}

html:-webkit-full-screen {
background: red;
}

html:fullscreen {
background: red;
}

全屏状态下的键盘输入 Full screen with key input
为了安全原因，很多情况下全屏输入都是被阻塞禁止的，但是chrome允许通过下面的API来允许键盘输入
docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

这个只在chrome支持，其他浏览器不支持。firefox计划使用requestFullscreenWithKeys 方法来支持鼠标输入，但是会触发用户通知已保证安全。

firefox10以上，chrome 15和safari5.1以上都支持了。