使用FullScreen让Video全屏

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

经常有网友提到需要让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看起来很强大，赶紧上手试一试吧！

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » 使用FullScreen让Video全屏