HTML5播放器自动全屏问题，已有手动全屏代码

topkof 2015-10-24 10:31:40

想让页面载入自动进入全屏模式，全屏按钮事件已有，谢谢~

<!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 div.videobox{

    width: 400px;

    height: 320px;

    margin: 100px auto;

    background-color:#000;

}

 

body div.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>

  

 

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

</div>

  

  

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

...全文

416 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

不断学习的ITer 2015-10-26

打赏
举报

window.onload =function() {launchFullscreen(document.getElementById('video'));} 不可以么

topkof 2015-10-24

打赏
举报

尝试一下两种方法都不好使 方法1

<body onload="launchFullscreen(element) ">

方法2

 <script language="javascript" >
function full() {
document.getElementById('fullScreenBtn').addEventListener('click',function(){
    launchFullscreen(document.getElementById('video')); 
}
window.onload=full;
</script>