HTML5 requestFullScreen&exitFullscreen全屏兼容方案

朴灿烈づ我的快乐病毒、 2022-09-22 13:00 238阅读 0赞

首先来说，这个标题具有误导性，但这样设置改标题也是主要因为video使用的比较多

在html5中，全屏方法可以适用于很多html标签元素，不仅仅是video

<!doctype  html> <html> <head> <meta charset="utf-8" /> <title>全屏问题</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="imagetoolbar" content="no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> *{     padding: 0px;     margin: 0px; } body div.videobox{     width: 400px;     height: 320px;     margin: 100px auto;     background-color:#000; } body div.videobox video.video { width: 100%;     height: 100%; } :-webkit-full-screen { } :-moz-full-screen { } :-ms-fullscreen {    } :-o-fullscreen {    } :full-screen {    } :fullscreen {   } :-webkit-full-screen video {   width: 100%;   height: 100%; } :-moz-full-screen video{     width: 100%;     height: 100%; }     </style> </head> <body>   <div id="videobox">           <video controls="controls" preload="preload" id="video" poster="poster.jpg">       <source src="./movie.ogg" type="video/ogg" />       <source src="./movie.mp4" type="video/mp4" />       <source src="./movie.webm" type="video/webm" />       <object data="./movie.mp4" width="100%" height="100%">         <embed width="100%" height="100%" src="./movie.swf" />       </object>     </video>     <button id="fullScreenBtn">全屏</button> </div>     <script type="text/javascript">   //反射調用 var invokeFieldOrMethod = function(element, method)  {    var usablePrefixMethod;    ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {        if (usablePrefixMethod) return;        if (prefix === "") {            // 无前缀，方法首字母小写            method = method.slice(0,1).toLowerCase() + method.slice(1);           }        var typePrefixMethod = typeof element[prefix + method];        if (typePrefixMethod + "" !== "undefined") {            if (typePrefixMethod === "function") {                usablePrefixMethod = element[prefix + method]();            } else {                usablePrefixMethod = element[prefix + method];            }        }    });            return usablePrefixMethod; };     //進入全屏  function launchFullscreen(element)     {     //此方法不可以在異步任務中執行，否則火狐無法全屏      if(element.requestFullscreen) {        element.requestFullscreen();      } else if(element.mozRequestFullScreen) {        element.mozRequestFullScreen();      } else if(element.msRequestFullscreen){         element.msRequestFullscreen();        } else if(element.oRequestFullscreen){         element.oRequestFullscreen();     }     else if(element.webkitRequestFullscreen)      {        element.webkitRequestFullScreen();      }else{               var docHtml  = document.documentElement;         var docBody  = document.body;         var videobox  = document.getElementById('videobox');         var  cssText = 'width:100%;height:100%;overflow:hidden;';         docHtml.style.cssText = cssText;         docBody.style.cssText = cssText;         videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';         document.IsFullScreen = true;       }    } //退出全屏    function exitFullscreen()    {        if (document.exitFullscreen) {          document.exitFullscreen();        } else if (document.msExitFullscreen) {          document.msExitFullscreen();        } else if (document.mozCancelFullScreen) {          document.mozCancelFullScreen();        } else if(document.oRequestFullscreen){             document.oCancelFullScreen();         }else if (document.webkitExitFullscreen){          document.webkitExitFullscreen();        }else{         var docHtml  = document.documentElement;         var docBody  = document.body;         var videobox  = document.getElementById('videobox');         docHtml.style.cssText = "";         docBody.style.cssText = "";         videobox.style.cssText = "";         document.IsFullScreen = false;     }   } document.getElementById('fullScreenBtn').addEventListener('click',function(){     launchFullscreen(document.getElementById('video'));      window.setTimeout(function exit(){ //檢查瀏覽器是否處於全屏 if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen) { exitFullscreen(); }    },5*1000); },false); </script> </body>   </html>

![094057_x0Bm_2256215.jpg][]

~~~~~~~~~~~~~~~~~~~~2014-11-30 更新，已修复的buglist如下~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1.  bug，之前写的Demo 不能做到很好的兼容 firefox全屏失败

FullScreenDeniedNotInputDriven=全屏请求被拒绝，因为 Element.mozRequestFullScreen() 不是在一个短期运行的由用户引发的事件处理代码段中运行的。

2.bug IE浏览器无法全屏，这里只让它放大了

3.IE浏览器无法判断是否全屏

4.之前忽略了 欧朋浏览器

[094057_x0Bm_2256215.jpg]: /images/20220721/48b5c78a95ec4b9b9fe1e8fe961d05a4.png