首先來說，這個標題具有誤導性，但這樣設定改標題也是主要因為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 = elelement ;<br /> } else {<br /> usablePrefixMethod = element[prefix method];<br /> }<br /> }<br /> });<br /> <br /> return usablePrefixMethod;<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 /> } else if(element.msRequestFullScreen();<br /> } else if(element.msRequestFullscreen){ement🎜> > } else if(element.oRequestFullscreen){<br /> element.oRequestFullscreen();<br /> }<br /> else if(element.webkitRequestFullscreen)<br /> {<br /> questl.webkitRequestFullsScreen); else{<br /> <br /> var docHtml = document.documentElement;<br /> var docBody = document.body;<br /> var videobox = document.getElementById('video); %;height:100%;overflow:hidden;';<br /> docHtml.style.cssText = cssText;<br /> docBody.style.cssText = cssText;<br /> videobox.style.cssText = cssText = cssText;<br /> videobox.style.cssText = cssText '; :0px;padding:0px;';<br /> document.IsFullScreen = true;<br /> <br /> }<br /> }<br />//退出全螢幕<br /> function exitFullscreen(>//退出全螢幕<br /> function exitFullscreen()<br /> if (document.exitFullscreen) {<br /> document.exitFullscreen();<br /> } else if (document.msExitFullscreen) {<br /> document.msExitFullsCancreen();<oonone;<t. 🎜> document.mozCancelFullScreen();<br /> } else if(document.oRequestFullscreen){<br /> document.oCancelFullScreen();<br /> }elf (document. <br /> }else{<br /> var docHtml = document.documentElement;<br /> var docBody = document.body;<br /> var videobox = document.getElementById('videobox's);<Heomm's); "";<br /> docBody.style.cssText = "";<br /> videobox.style.cssText = "";<br /> document.IsFullScreen = false;<br /> }<br /> }<br />docment. ('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 />ex>Fulen( > },5*1000);<br />},false);<br /> <br />
