所在位置: 首页 > 网友投稿 > 使用FullScreen让Video全屏

使用FullScreen让Video全屏

时间:2022-11-29 12:07:16 | 来源:网友投稿

经常有网友提到需要让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也提供了全屏事件,全屏属性和事件的相关方法也需要添加浏览器前缀。

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