HTML5 video播放器全屏(fullScreen)实现的方法

互联网 18-6-11

这篇文章主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下

首先来说，这个标题具有误导性，但这样设置改标题也是主要因为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 p.videobox{    width: 400px;    height: 320px;    margin: 100px auto;    background-color:#000; }  body p.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>   <p 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> </p>   <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>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

HTML5 video播放器全屏(fullScreen)实现的方法

相关资讯

标签推荐