首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多 在html5中,全屏方法可以适用于很多html 元素,不仅仅是video 复制代码代码如下: 全屏问题 <br />*{<br /> padding: 0px;<br /> margin: 0px;<br />}<br /> <br />body div.videobox{<br /> width: 400px;<br /> height: 320px;<br /> margin: 100px auto;<br /> background-color:#000;<br />}<br /> <br />body div.videobox video.video<br />{<br />width: 100%;<br /> height: 100%;<br />}<br /> <br />:-webkit-full-screen {<br /> <br />}<br /> <br />:-moz-full-screen {<br /> <br />}<br /> <br />:-ms-fullscreen {<br /> <br />}<br /> <br />:-o-fullscreen {<br /> <br />}<br /> <br />:full-screen { <br /> <br />}<br /> <br />:fullscreen {<br /> <br />}<br /> <br />:-webkit-full-screen video {<br /> width: 100%;<br /> height: 100%;<br />}<br />:-moz-full-screen video{<br /> width: 100%;<br /> height: 100%;<br />}<br /> 全屏 <br /> <br />//反射調用<br />var invokeFieldOrMethod = function(element, method) <br />{<br /> var usablePrefixMethod;<br /> ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {<br /> if (usablePrefixMethod) return;<br /> if (prefix === "") {<br /> // 无前缀,方法首字母小写<br /> method = method.slice(0,1).toLowerCase() + method.slice(1); <br /> }<br /> var typePrefixMethod = typeof element[prefix + method];<br /> if (typePrefixMethod + "" !== "undefined") {<br /> if (typePrefixMethod === "function") {<br /> usablePrefixMethod = element[prefix + method]();<br /> } else {<br /> usablePrefixMethod = element[prefix + method];<br /> }<br /> }<br /> });<br /> <br /> return usablePrefixMethod;<br />};<br /> <br />//進入全屏<br /> function launchFullscreen(element) <br /> {<br /> //此方法不可以在異步任務中執行,否則火狐無法全屏<br /> if(element.requestFullscreen) {<br /> element.requestFullscreen();<br /> } else if(element.mozRequestFullScreen) {<br /> element.mozRequestFullScreen();<br /> } else if(element.msRequestFullscreen){ <br /> element.msRequestFullscreen(); <br /> } else if(element.oRequestFullscreen){<br /> element.oRequestFullscreen();<br /> }<br /> else if(element.webkitRequestFullscreen)<br /> {<br /> element.webkitRequestFullScreen();<br /> }else{<br /> <br /> var docHtml = document.documentElement;<br /> var docBody = document.body;<br /> var videobox = document.getElementById('videobox');<br /> var cssText = 'width:100%;height:100%;overflow:hidden;';<br /> docHtml.style.cssText = cssText;<br /> docBody.style.cssText = cssText;<br /> videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';<br /> document.IsFullScreen = true;<br /> <br /> }<br /> }<br />//退出全屏<br /> function exitFullscreen()<br /> {<br /> if (document.exitFullscreen) {<br /> document.exitFullscreen();<br /> } else if (document.msExitFullscreen) {<br /> document.msExitFullscreen();<br /> } else if (document.mozCancelFullScreen) {<br /> document.mozCancelFullScreen();<br /> } else if(document.oRequestFullscreen){<br /> document.oCancelFullScreen();<br /> }else if (document.webkitExitFullscreen){<br /> document.webkitExitFullscreen();<br /> }else{<br /> var docHtml = document.documentElement;<br /> var docBody = document.body;<br /> var videobox = document.getElementById('videobox');<br /> docHtml.style.cssText = "";<br /> docBody.style.cssText = "";<br /> videobox.style.cssText = "";<br /> document.IsFullScreen = false;<br /> }<br /> }<br />document.getElementById('fullScreenBtn').addEventListener('click',function(){<br /> launchFullscreen(document.getElementById('video')); <br /> window.setTimeout(function exit(){<br />//檢查瀏覽器是否處於全屏<br />if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen)<br />{<br />exitFullscreen();<br />}<br /> },5*1000);<br />},false);<br /> <br />