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

百变鹏仔 2个月前 (10-18) #H5教程

文章标签播放器

这篇文章主要介绍了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(&#39;videobox&#39;);       var  cssText = &#39;width:100%;height:100%;overflow:hidden;&#39;;       docHtml.style.cssText = cssText;       docBody.style.cssText = cssText;       videobox.style.cssText = cssText+&#39;;&#39;+&#39;margin:0px;padding:0px;&#39;;       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(&#39;videobox&#39;);       docHtml.style.cssText = "";       docBody.style.cssText = "";       videobox.style.cssText = "";       document.IsFullScreen = false;   } }document.getElementById(&#39;fullScreenBtn&#39;).addEventListener(&#39;click&#39;,function(){   launchFullscreen(document.getElementById(&#39;video&#39;));    window.setTimeout(function exit(){//檢查瀏覽器是否處於全屏if(invokeFieldOrMethod(document,&#39;FullScreen&#39;) || invokeFieldOrMethod(document,&#39;IsFullScreen&#39;) || document.IsFullScreen){exitFullscreen();}  },5*1000);},false);</script></body></html>

文章推荐

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

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集