• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

使用FullScreen让Video全屏

JAVA web前端中文站 2年前 (2017-08-14) 1428次浏览 已收录 0个评论

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

如果光使用 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 看起来很强大,赶紧上手试一试吧!

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:使用 FullScreen 让 Video 全屏
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址