우선 제목이 오해의 소지가 있지만 이렇게 제목을 바꾼 이유는 주로 영상이 더 많이 사용되기 때문입니다 html5에서는 동영상뿐만 아니라 다양한 html 요소에 전체화면 방식을 적용할 수 있습니다 코드 복사 코드는 다음과 같습니다. 全屏问题<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>//Reflection call<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> var typePrefixMethod = 요소 유형[접두사 메서드];<br> if (typePrefixMethod "" !== "undefine") {<br> if (typePrefixMethod === "function") {<br> usablePrefixMethod = 요소 [접두사 메서드] ();<br> } else {<br> usablePrefixMethod = 요소[접두사 메서드];<br> }<br> }<br> });<br> <br> return usablePrefixMethod;<br> };<br> <br>//전체 화면으로 전환<br> function launchFullscreen(element) <br> {<br> //이 메서드는 비동기 작업에서 실행할 수 없습니다. 그렇지 않으면 Firefox는 전체 화면으로 전환할 수 없습니다. <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 = '너비 :100%;높이: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> functionexitFullscreen()<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') || 호출FieldOrMethod(document,'IsFullScreen') || document.IsFullScreen)<br>{ <br>exitFullscreen();<br>} <br> },5*1000);<br>},false);<br> <br>