最近自己做H5的播放器,里面的各种按钮都要悉数去做,去调整样式,详细的属性方法事件在我另一篇‘js基础核心梳理之Video’里有堆,可以去全面的做个概览。却没有发现有全屏播放这个方法或者属性,不知道未来会不会封装这个方法进去。比如有个属性叫fullScreen设置为true就可以全屏显示。既然没有那就查查资料自己封装一个全屏方法,原则上市场上存在的产品现象背后都有可实现的方法,你就可以去做。

以下是实现全屏和退出全屏的各种浏览器兼容方法,也可以利用 fullScreenElementfullScreenEnabled去检测某个全屏的元素和全屏状态。

全屏模式

1
2
3
4
5
6
7
8
9
10
11
12
13
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")); // 某个页面元素

退出全屏模式

各种浏览器都提供了一个非常有用的全屏模式时的css样式规则,直接套用即可

1
2
3
4
5
6
7
8
9
10
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
exitFullscreen();//exitFullscreen只能由document对象调用,而不是启动全屏时传入的对象。

全屏模式属性

1
2
3
4
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
document.fullScreenElement: 全屏显示的网页元素。
document.fullScreenEnabled: 判断当前是否处于全屏状态

全屏样式CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
:-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 */
}

欢迎交流转载请注明出处