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标签的播放控制

关于H5新属性audio音频和video视频的控制解析

以上就是HTML5 video播放器全屏(fullScreen)实现的方法的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！