HTML5 全屏特性

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

（1）全屏　

// 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）取消全屏

// 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）全屏的样式

/* html */
:-webkit-full-screen {
  background: pink;
}
:-moz-full-screen {
  background: pink;
}

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

　　

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