Fullscreen API

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide

Guide to the Fullscreen API

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

 

 

딱 두 개만 알면 풀 스크린을 다룰 수 있습니다. 

 

document.exitFullscreen() 

Element.requestFullscreen()

 

 

1. 특정 버튼을 누르면 document.exitFullscreen()를 통해 풀 스크린을 띄웁니다. 

2. 풀 스크린을 띄운 다음에는 해당 이벤트 함수를 제거한 후 (removeEventListener) 풀 스크린을 닫는 Element.requestFullscreen() 이벤트를 지정해줍시다.

3. 반대로 닫은 후에는 Element.requestFullscreen() 이벤트를 제거하고 다시 여는 document.exitFullscreen()를 지정해주면 됩니다.

 

(열고 닫을 때 유저의 경험을 위해 버튼 모양을 바꾸는 것은 알아서...)

 

이를 코드로 구현하면 다음과 같습니다.

const fullscreenButton = document.getElementById("jsFullScreen");

function exitFullScreen() {
  fullscreenButton.innerHTML = '<i class="fas fa-expand"></i>';
  fullscreenButton.addEventListener("click", goFullScreen);
  document.exitFullscreen();
}

function goFullScreen() {
  videoContainer.requestFullscreen();
  fullscreenButton.innerHTML = '<i class="fas fa-compress"></i>';
  fullscreenButton.removeEventListener("click", goFullScreen);
  fullscreenButton.addEventListener("click", exitFullScreen);
}

fullscreenButton.addEventListener("click", goFullScreen);

 

 

+

 

어디에 풀 스크린을 줄 것인지에 따라 기본적으로 제공하는 controller들을 창에 띄우느냐, 띄우지 않느냐가 결정됩니다. 아래의 Pug를 예시로 들자면, videoPlayer div 자체에 줄 때는 기본적인 컨트롤러가 뜹니다.

 

mixin videoPlayer(video = {})
    .videoPlayer#jsVideoPlayer
        video(src=`/${video.src}`)
        .videoPlayer__controls
            .videoPlayer__column
                span#jsVolumeButton
                    i.fas.fa-volume-up
                span
                    | 00:00 / 10:00
            .videoPlayer__column
                span#jsPlayButton
                    i.fas.fa-play
            .videoPlayer__column
                span#jsFullScreen
                    i.fas.fa-expand

 

그러나 videoPlayer div 내의 video 태그를 풀 스크린으로 띄우면 기본적인 컨트롤러를 제공하지 않습니다. 커스텀 컨트롤러를 만들었다면 video 태그를 직접 풀 스크린으로 띄웁시다.

 

+

 

현재 풀 스크린 메서드는 시간이 흘러 웹 호환성 문제가 대개 해결되었으나, 확실히 하고 싶으면 해당 메서드가 있는지 확인해보고 없으면 prifixer(webkit, moz, ms)를 붙여서 실행해보면 됩니다....

 

function exitFullScreen() {
  fullScrnBtn.innerHTML = '<i class="fas fa-expand"></i>';
  fullScrnBtn.addEventListener("click", goFullScreen);
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

function goFullScreen() {
  if (videoContainer.requestFullscreen) {
    videoContainer.requestFullscreen();
  } else if (videoContainer.mozRequestFullScreen) {
    videoContainer.mozRequestFullScreen();
  } else if (videoContainer.webkitRequestFullscreen) {
    videoContainer.webkitRequestFullscreen();
  } else if (videoContainer.msRequestFullscreen) {
    videoContainer.msRequestFullscreen();
  }
  fullScrnBtn.innerHTML = '<i class="fas fa-compress"></i>';
  fullScrnBtn.removeEventListener("click", goFullScreen);
  fullScrnBtn.addEventListener("click", exitFullScreen);
}