html5 video fullScreen全屏实现方式

jopen 6年前

首先来说,这个标题具有误导性,但这样设置改标题也是主要因为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>


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

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

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

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

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

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

来自: http://my.oschina.net/ososchina/blog/349660