轉自HTML5全屏(Fullscreen)API詳細介紹

https://www.cnblogs.com/lfqcode/p/6164001.html

// 整個頁面
onclick= launchFullScreen(document.documentElement);
// 某個元素
launchFullScreen(document.getElementById("videoElement"));

// 找到支援的方法, 使用需要全屏的 element 呼叫
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();
}
}

// 退出 fullscreen
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}


// 呼叫退出全屏方法!
exitFullscreen();

Fullscreen 屬性與事件

一個壞訊息,到目前為止,全屏事件和方法依然是帶字首的,好訊息就是很快主流瀏覽器就會都支援。

1.document.fullscreenElement: 當前處於全屏狀態的元素 element.
2.document.fullscreenEnabled: 標記 fullscreen 當前是否可用.

當進入/退出 全屏模式時,會觸發 fullscreenchange 事件:

var fullscreenElement =
document.fullscreenEnabled
|| document.mozFullscreenElement
|| document.webkitFullscreenElement;
var fullscreenEnabled =
document.fullscreenEnabled
|| document.mozFullscreenEnabled
|| document.webkitFullscreenEnabled;

Fullscreen CSS

瀏覽器提供了一些有用的 fullscreen CSS 控制規則:

/* html */
:-webkit-full-screen {
/* properties */
}
:-moz-fullscreen {
/* properties */
}


:fullscreen {
/* properties */
}


/* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}


/* styling the backdrop */
::backdrop {
/* properties */
}