HTML5 全屏特性

html5 现在支持全屏特性了，fullscreen api接口如下所示（使浏览器窗口全屏），见下列代码：

（1）全屏　

?

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

（2）取消全屏

?

1 2 3 4 5 6 7 8 9 10 11 12 13

// Whack fullscreen function cancelFullscreen() {   if(document.cancelFullScreen) {     document.cancelFullScreen();   } else if(document.mozCancelFullScreen) {     document.mozCancelFullScreen();   } else if(document.webkitCancelFullScreen) {     document.webkitCancelFullScreen();   } }   // Cancel fullscreen for browsers that support it! cancelFullscreen();

　　

（3）全屏属性和事件

• document.fullScreenElement: 触发全屏的元素.
• document.fullScreenEnabled: 全屏是否被禁止.

（4）全屏的样式

?

1 2 3 4 5 6 7 8 9 10 11 12 13

/* html */ :-webkit-full-screen {   background: pink; } :-moz-full-screen {   background: pink; }   /* deeper elements */ :-webkit-full-screen video {   width: 100%;   height: 100%; }

　　

Note：触发全屏需要手动触发，浏览器不能自动全屏的。