HTML5實現全屏API 進入和退出全屏

2021-07-11 02:16:58 字數 886 閱讀 4325

現在主流瀏覽器基本上實現了全屏效果,但是不同瀏覽器實現不一樣:

【進入和退出全屏】

// webkit (works in safari5.1 and chrome 15)

element.webkitrequestfullscreen();

document.webkitcancelfullscreen();

// firefox 10+

element.mozrequestfullscreen();

document.mozcancelfullscreen();

// w3c 提議

element.requestfullscreen();

document.exitfullscreen();

【相容解決方案】

1

//進入全屏

2function

requestfullscreen() else

if(de.mozrequestfullscreen) else

if(de.webkitrequestfullscreen) 11}

12//

退出全屏

13function

exitfullscreen() else

if(de.mozcancelfullscreen) else

if(de.webkitcancelfullscreen)

22 }

注:可能出於安全考慮,只能手動觸發才能實現全屏,瀏覽器自動執行無效果。

【例項】

document.body.addeventlistener('click',function

(),5000);

},false);

HTML5實現全屏API 進入和退出全屏

現在主流瀏覽器基本上實現了全屏效果,但是不同瀏覽器實現不一樣 進入和退出全屏 webkit works in safari5.1 and chrome 15 element.webkitrequestfullscreen document.webkitcancelfullscreen firefox...

HTML5全屏操作API

基本 由於相容性的原因 在ie9以下不支援,但是在高階瀏覽器新版本支援 不同瀏覽器需要新增不同的私有字首 在js中也有私有字首,在方法屬性之前加上即可,並且首字母需大寫 script 將瀏覽器字首相容封裝成函式 function tofullvideo else if videodom.webkit...

html5退出全屏觸發的方法 HTML5 拖放

本節我們學習 html5 中的拖放,拖放是一種常見的特性,也就是抓取物件以後拖到另乙個位置。在 html5 中,拖放是標準的一部分,任何元素都能夠拖放。拖放是由拖動與釋放兩部分組成,拖放事件也分為被拖動元素的相關事件,和容器的相關事件。我們通過上述的拖放事件來實現將下圖 你好,俠課島 拖放到上面的矩...