使用FullScreen让Video全屏

经常有网友提到需要让video全屏。其他让video全屏不难，难就难在兼容性。

如果光使用FullScreen api就能全屏的话，就简单了。主要是各种浏览器对w3c的标准用的api不一样。

比如：火狐的Gecko内核要用moz前缀，webkit内核的要用webkit，ms代表IE的前缀，o代表Opera前缀。

下面看看全屏的主要代码：

// 判断各种浏览器，找到正确的方法
function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}
// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
// 某个页面元素
launchFullScreen(document.getElementById("videoElement")); 

该全屏api在被调用时，会弹出一个等待用户确认的通知，只有用户允许了才会全屏。

任何页面元素都可以成为全屏输出的目标，HTML5里甚至还提供了一个CSS伪类来让程序员在浏览器全屏时控制全屏元素的样式。当你在开发游戏时这个全屏API接口特别有用；尤其像BananaBread这样的枪击游戏中。

反过来，有全屏就有退出全屏。退出全屏我们使用exitFullscreen()函数。但是退出全屏不需要浏览器通知用户进行允许提示。

// 判断浏览器种类
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}
// 退出全屏模式!
exitFullscreen();

exitFullscreen只能由document对象调用，而不是启动全屏时传入的对象。

另外w3c也提供了全屏事件，全屏属性和事件的相关方法也需要添加浏览器前缀。

• document.fullScreenElement: 全屏显示的网页元素。
• document.fullScreenEnabled: 判断当前是否处于全屏状态。

fullscreenchange事件会在启动全屏或退出全屏时触发：

var fullscreenElement = document.fullscreenElement 
|| document.mozFullScreenElement 
|| document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled 
|| document.mozFullScreenEnabled 
|| document.webkitFullscreenEnabled;

全屏样式CSS

各种浏览器都提供了一个非常有用的全屏模式时的css样式规则：

:-webkit-full-screen {
  /* properties */
}
:-moz-full-screen {
  /* properties */
}
:-ms-fullscreen {
  /* properties */
}
:full-screen { /*pre-spec */
  /* properties */
}
:fullscreen { /* spec */
  /* properties */
}
/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}
/* styling the backdrop*/
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}

这些api看起来很强大，赶紧上手试一试吧！

： » 使用FullScreen让Video全屏