Web全屏模式

2021-09-11 21:32:23 字數 1852 閱讀 4943

mdn:全屏 api 為使用使用者的整個螢幕展現網路內容提供了一種簡單的方式。這種api讓你可以簡單地控制瀏覽器,使得乙個元素與其子元素,如果存在的話,可以佔據整個螢幕,並在此期間,從螢幕上隱藏所有的瀏覽器使用者介面以及其他應用。

document.fullscreen

用於檢測當前文件是否處於全屏模式,返回值為布林型別

document.fullscreenelement

當前啟用全屏模式的元素

document.fullscreenenabled

當前文件是否支援全屏

請求全屏模式

乙個全屏的請求應該由乙個具體的元素發出,以video元素為例,請求方式如下:

controls

id="video">

src="somevideo.webm">

source>

src="somevideo.mp4">

source>

video>

複製**

var elem = document.getelementbyid("video");

elem.addeventlistener('click',function ()

});複製**

mdn:全屏請求必須在事件處理函式中呼叫,否則將會被拒絕。

退出全屏模式
// 按enter建退出全屏

document.addeventlistener("keydown", function(e)

}, false);

複製**

注意:exitfullscreen方法只存在於document物件上,而不存在與elem

onfullscreenchange

onfullscreenchange事件觸發的時刻的有2個:一是進入全屏時,二是退出全屏時。也就是說如果全屏模式的狀態發生了改變,那麼onfullscreenchange事件就會被觸發

document.onfullscreenchange = function (event ) ;

複製**

onfullscreenerror

當嘗試在不支援全屏模式的元素上請求全屏時,則會發生錯誤,這個錯誤會觸發onfullscreenerror事件

document.onfullscreenerror = function (event ) ;

複製**

驗證onfullscreenerror事件最簡單的方式就是:在事件***之外發起全屏請求。 因為**全屏請求必須在事件處理函式中呼叫,否則將會被拒絕。**在拒絕的同時會產生乙個錯誤,這個錯誤會觸發onfullscreenerror事件

document.onfullscreenerror = function (event ) ; 

// requestfullscreen()將會失敗,因為它在事件處理器之外

document.documentelement.requestfullscreen();

複製**

gecko會自動為進入全屏模式的元素新增額外樣式:width: 100%; height: 100%l;,目的是使其鋪滿整個螢幕;而webkit沒有這種預設行為,所以需要我們手動補充這個樣式

#video

:-webkit-full-screen

複製**

pc端

移動端 表1

表2

全屏模式 硬縮放

硬體縮放的用法 flash player update 3的stage物件追加了乙個fullscreensourcerect的屬性。這個屬性可以在as2.0和as3.0裡使用。它把rectangle的 領域縮放為全屏。用fullscreensourcerect指定領域用硬體來畫,比以前的效率與畫質高...

Flex4 web專案全屏

本人目前用4.6sdk,在此基礎上全屏分為兩種,一種是不接受鍵盤事件,一種接受鍵盤事件 flash builder4.6 自帶player 11.1 如果不對sdk進行任何操作,只能完成不接受鍵盤事件的全屏,但此功能對於絕大多數專案而言等於沒用.實現方法 由於web專案index.template....

android如何設定全屏模式

設定android全屏模式有兩種方法,一種是在程式 中設定,另一種是配置manifest.xml檔案,推薦使用第二種方式。只需要新增下面的xml 就好了 www.2cto.com 1 android theme android style theme.notitlebar.fullscreen 例如...