首先来说，这个标题具有误导性，但这样设置改标题也是主要因为video使用的比较多

在html5中，全屏方法可以适用于很多html标签元素，不仅仅是video

    
    
     
     
     
      
       *{    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%;}     
       
                 
        
               
               
               
               
         
                  
                        
          
           全屏  
           
             //反射調用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); 
           
          
         
        
       
      
     
    

~~~~~~~~~~~~~~~~~~~~2014-11-30 更新，已修复的buglist如下~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1. bug，之前写的Demo 不能做到很好的兼容 firefox全屏失败

FullScreenDeniedNotInputDriven=全屏请求被拒绝，因为 Element.mozRequestFullScreen() 不是在一个短期运行的由用户引发的事件处理代码段中运行的。

  2.bug IE浏览器无法全屏，这里只让它放大了

  3.IE浏览器无法判断是否全屏

  4.之前忽略了 欧朋浏览器