使用FullScreen让Video全屏

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

更多精彩内容请看 web前端中文站
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看起来很强大,赶紧上手试一试吧!

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

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到