How to implement full screen (fullScreen) in HTML5 video player-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

How to implement full screen (fullScreen) in HTML5 video player

不言

Jun 11, 2018 pm 05:17 PM

html5 video player

This article mainly introduces the HTML5 video player full screen (fullScreen) method example. This article directly gives a complete code example. Friends who need it can refer to it.

First of all, this title is misleading , but setting and changing the title in this way is also mainly because video is used more

In html5, the full-screen method can be applied to many html elements, not just 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>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

HTML5 Playback control of the video tag

About the control analysis of the new H5 attributes audio and video

The above is the detailed content of How to implement full screen (fullScreen) in HTML5 video player. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn