まず、このタイトルは誤解を招きますが、このようにタイトルを変更した主な理由は、ビデオがより多く使用されるためです 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>//リフレクション呼び出し<br>var invokeFieldOrMethod = function(element, method) <br>{<br> var unavailablePrefixMethod;<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 = typeof element[プレフィックスメソッド];<br> if (typePrefixMethod "" !== "unknown") {<br> if (typePrefixMethod === "function") {<br> usedPrefixMethod = element [プレフィックスメソッド] ();<br> } else {<br> unavailablePrefixMethod = element[プレフィックスメソッド];<br> }<br> }<br> });<br> <br> return unavailablePrefixMethod;<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 = 'width :100%;height:100%;overflow:hidden;';<br> docHtml.style.cssText = cssText;<br> docBody.style.cssText = cssText;<br> ビデオボックス。 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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
