So implementieren Sie den Vollbildmodus (fullScreen) im HTML5-Videoplayer-H5-Tutorial-php.cn

So implementieren Sie den Vollbildmodus (fullScreen) im HTML5-Videoplayer

不言

Freigeben： 2018-06-11 17:17:44

Original

29162 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Beispiel für die Vollbildmethode (FullScreen) des HTML5-Videoplayers vorgestellt. Freunde, die es benötigen, können darauf verweisen

Zunächst einmal ist dieser Titel irreführend , aber das Festlegen und Ändern des Titels auf diese Weise liegt auch hauptsächlich daran, dass Videos häufiger verwendet werden

In HTML5 kann die Vollbildmethode auf viele HTML-Elemente angewendet werden, nicht nur auf Videos

<!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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

HTML5 Wiedergabesteuerung des Video-Tags

Über die Steuerungsanalyse der neuen H5-Attribute Audio und Video

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Vollbildmodus (fullScreen) im HTML5-Videoplayer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!