[DOM_Document] JS - fullscreenEnabled 속성 - 전체화면모드 (=풀스크린모드) 허용 (IE11 이상 접두어필요)

document.fullscreenEnabled 예제 

 

 

 

<meta name="viewport" content="width=device-width, initial-scale=1">

<button onclick="openFullscreen();">클릭</button>

<p><strong>Tip:</strong> "Esc" 키 누르면 풀스크린 모드 빠져나옴.</p>

<video width="100%" controls id="hzvideo">

  <source src="https://vt.tumblr.com/tumblr_o600t8hzf51qcbnq0_480.mp4" type="video/mp4">

  video tag 지원 않는 브라우저는 개나 줘버려.

</video>

<script>

var elem = document.getElementById("hzvideo");

function openFullscreen() {

  if (

    document.fullscreenEnabled || /* 표준 */

    document.webkitFullscreenEnabled || /* Chrome, Safari, Opera */

    document.mozFullScreenEnabled || /* Firefox */

    document.msFullscreenEnabled /* IE/Edge */

  ) {   

    elem.webkitRequestFullscreen();

    if (elem.requestFullscreen) {

      elem.requestFullscreen(); /* 표준 */

    } else if (elem.mozRequestFullScreen) { /* Firefox */

      elem.mozRequestFullScreen();

    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari, Opera */

      elem.webkitRequestFullscreen();

    } else if (elem.msRequestFullscreen) { /* IE/Edge */

      elem.msRequestFullscreen();

    }    

  }

}

</script>

 

결과보기