div的全屏与退出全屏
作用:将div全屏与退出全屏,一般播放器使用较多。
html按钮:
<button onclick="showFull();">
全屏
</button>
<button onclick="delFull();">
退出全屏
</button>
js调用:
function showFull(){
var full=document.getElementById("container");
launchIntoFullscreen(full);
}
function delFull() {
exitFullscreen();
}
全屏方法封装:
function launchIntoFullscreen(element) {
if(element.requestFullscreen){
element.requestFullscreen();
}
else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
退出全屏方法封装:
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}