HTML5全螢幕(Fullscreen)API詳細介紹_html5教學技巧

在越來越真實的web應用程式中,JavaScript也變得越來越給力.

FullScreen API 是一個新的JavaScript API,簡單又強大. FullScreen 讓我們可以透過程式設計的方式來向使用者請求全螢幕顯示,如果互動完成,隨時可以退出全螢幕狀態.

線上示範Demo:  Fullscreen API Example

(在此Demo中，可以Launch ,Hide ,以及Dump顯示相關屬性,可以透過chrome的控制台查看日誌資訊.)

啟動全螢幕模式

全螢幕API requestFullscreen方法在一些舊的瀏覽器裡面依然使用帶前綴形式的方法名,因此可能需要進行檢測判斷:
(帶前綴,意思就是各個瀏覽器內核不通用.)

複製程式碼

程式碼如下:

// 找到支援的方法, 使用全螢幕的element呼叫
function launchFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullullScreen)
} else if(element.mozRequestFullullScreen)>
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFulls(msRequestFulls)>


// 在支援全螢幕的瀏覽器中啟動全螢幕
// 整個頁面
launchFullScreen(document.documentElement);
// 某個元素
launchFullScreen( document.getElementById("videoElement"));

將需要全螢幕顯示的DOM元素作為參數,呼叫此方法即可讓window進入全螢幕狀態,有時候可能需要使用者同意(瀏覽器自己和使用者互動),假若使用者拒絕,則可能出現各種不完全的全螢幕.

如果使用者同意進入全螢幕,那麼工具列以及其他瀏覽器元件會隱藏起來,使document框架的寬度和高度橫跨整個螢幕.

退出全螢幕模式

使用exitFullscreen 方法可以讓瀏覽器退出全螢幕,傳回原先的版面. 此方法在一些舊的瀏覽器上也是支援前綴方法.

複製程式碼程式碼如下:

// 退出fullscreen

function exitFullscreen() {
if(document.exFullscreen) } else if(document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if(document.webkitExitFullscreen) }Exitus;
}


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


請注意: exitFullscreen 只能透過document 物件呼叫— document 物件調用使用普通的DOM element.


Fullscreen 屬性與事件

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

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

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

複製程式碼

程式碼如下:var fullscreenElement No. || document.mozFullscreenElement || document.webkitFullscreenElement;

var fullscreenEnabled =

document.fullscreenEnabled

Fulls Fullsableenabledable.>>Ac​​idableenabled. >>>>>>美>>>>>>>美>假🎜>

初始化全螢幕方法時,可以偵測需要監聽哪一個事件.


Fullscreen CSS


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

複製程式碼

程式碼
複製程式碼

程式碼/* html */ :-webkit-full-screen { /* properties */

}

:-moz-fullscreen {

/* properties * /
}


:fullscreen {
/* properties */
}


/* deeper elements * width: 100%;
height: 100%;
}


/* styling the backdrop */

/* styling the backdrop */ 🎜> /* properties */
}


在某些情況下,WebKit需要一些特殊處理,所以在處理多媒體時,你可能需要上面的程式碼。

我認為Fullscreen API 超級簡單,超級有用. 我首次見到這個API 是在一個名為MDN's BananaBread demo 的全客戶端第一人稱射擊遊戲, 這真是一個使用全屏模式的絕佳案例。

全螢幕API提供了進入和退出全螢幕模式的方式,並提供相應的事件來監測全螢幕狀態的改變,所以各方面都連貫起來了.

請記住這個很好的API吧 —— 在未來的某個時刻,它一定會派上用場!