Fullscreen API로 fullscreen 이벤트 크로스브라우징 하기

Fullscreen API를 사용하여 fullscreen 이벤트 크로스 브라우징 해결하기

fullscreen 이벤트 크로스브라우징을 힘들게 해결해서 한번 정리하려고 합니다.

그리고 미리 말씀드리지만 지금 소개하는 내용은 IE10이하에서는 되지 않습니다.

Fullscreen API가 IE10 이하를 지원하지 않기 때문입니다.

현재 fullscreen 상태인지 아닌지 체크

각 브라우저 별로 다음 네 가지 프로퍼티로 현재 브라우저의 fullscreen 상태를 체크할 수 있습니다.

document.fullscreenElement
document.mozFullScreenElement
document.webkitFullscreenElement
document.msFullscreenElement

그런데 밑에 있는 requestFullscreen과 함께 사용하면 document.msFullscreenElement는 flag기능을 제대로 수행하지 못하는 것을 발견할 수 있었습니다. 따라서 제가 이것을 사용할 때에는 아쉽게도 document.msFullscreenElement만 다른 변수를 만들어 대체하였습니다.

또 주의할 점은 Microsoft Edge의 경우는 ms가 아니라 webkit 접두어가 들어간 프로퍼티를 사용해야 한다는 것입니다.

fullscreen으로 변화시키기

fullscreen 기능을 사용하는 경우가 여러가지가 있을 텐데요. 그중 제가 생각하기로는 가장 많이 쓰일 용도는 아무래도 동영상일 것 같다고 판단했습니다. 그래서 예시 코드에서 fullscreen을 사용하는 object의 변수명을 video라고 정했습니다. 따라서 예시 코드에서 video는 실제 video Element를 할당받은 변수라고 생각하면 될 것 같습니다.

IE가 아닌 경우(Edge포함)

if (!document.fullscreenElement && 
!document.mozFullScreenElement && 
!document.webkitFullscreenElement) {
  //video는 element를 할당한 변수
  if (video.requestFullscreen) { 
      video.requestFullscreen(); 
  } else if (video.mozRequestFullScreen) { 
      video.mozRequestFullScreen(); 
  } else if (video.webkitRequestFullscreen) { 
      video.webkitRequestFullscreen(); 
  } 
}

위에서 언급했듯이 Edge는 ms가 아니라 webkit에 포함됩니다.

IE의 경우

//isFull.IE는 위에서 언급한 IE 풀스크린 여부를 저장하는 flag
if(!isFull.IE) video.msRequestFullscreen();

위와 같이 사용하는 것은 그저 제가 찾은 방법일 뿐입니다. IE까지 호환하기 위한 더 깔끔한 코드를 작성하는 방법이 얼마든지 있을 수 있습니다.

fullscreen일 때 다시 원래 크기로 돌리기

풀스크린 상태일 때 원래 사이즈로 다시 돌리기 위한 코드는 다음과 같습니다.

IE가 아닌 경우(Edge포함)

if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
}

IE의 경우

//isFull.IE는 위에서 언급한 IE 풀스크린 여부를 저장하는 flag
if(isFull.IE) document.msExitFullscreen();

fullscreenchange 이벤트 처리

fullscreenchange 이벤트는 브라우저가 fullscreen상태인지 아닌지 그 상태 값이 변경되는 이벤트를 의미합니다. fullscreenchange 이벤트가 발생했을 때, 실행할 이벤트 핸들러를 설치하려면 역시 각 브라우저별로 이벤트 리스너를 달아줘야 합니다.

IE가 아닌 경우(Edge 포함)

document.addEventListener("fullscreenchange", eventHandler);
document.addEventListener("webkitfullscreenchange", eventHandler);
document.addEventListener("mozfullscreenchange", eventHandler);

IE의 경우에는 fullscreenchange 이벤트가 없습니다. 따라서 위에서 2번, 3번에서 fullscreen으로 변화시킬 때와 원래 사이즈로 돌릴 때 eventHandler로 넣어주고 싶은 함수를 호출해줘야 합니다.

//isFull.IE는 위에서 언급한 IE 풀스크린 여부를 저장하는 flag
//video는 element를 할당한 변수
if(!isFull.IE) {
    video.msRequestFullscreen();
    isFull.IE = true;
    eventHandler();
} else {
    document.msExitFullscreen();
    isFull.IE = false;
    eventHandler();
}

fullscreen API를 이용할 때 IE를 지원하려면 코드가 많이 지저분해지는 것 같습니다. 따라서 사용할 때 이 점을 제일 고려해줘야 할 것 같습니다.

키보드 이벤트로 fullscreen 조작하기

키보드 이벤트가 가장 난관이었습니다.

문제점 1.

키보드 이벤트로는 msRequestFullscreen()이 작동하지 않습니다.

문제점 2.

풀 스크린 상태에서 esc는 event.preventDefault()를 무시하고 풀 스크린을 해제합니다.

문제점 3.

Edge는 풀 스크린에서 esc를 누르면 keydown이벤트의 경우 이벤트 핸들러가 호출되지 않음. keyup인 경우에만 됩니다.

문제점 4.

풀 스크린에서 esc를 누르면 크롬, 파이어폭스의 경우 keydown, keyup 등의 이벤트 핸들러가 호출되지 않습니다.

그냥 esc로 뭘 하려는 거 자체가 총체적 난국이었습니다. 그래서 esc는 그냥 방치한 채 위에서 설명한 fullscreenchange이벤트를 활용하면 됩니다. 어차피 esc로 풀 스크린을 탈출하면 fullscreenchange 이벤트가 작동합니다.

단, IE의 경우 fullscreenchange이벤트가 없었습니다. 그래서 IE의 경우에는 esc 키보드 이벤트에 이벤트 핸들러를 달아줘야 합니다. IE는 풀 스크린 상태에서 esc 키보드 사용 시 이벤트 핸들러가 정상적으로 동작하므로 이 방법을 사용해줍니다.

IE가 아닌 경우(Edge포함) esc로 풀 스크린 해제 시 => fullscreenchange 이벤트로 이벤트핸들러를 호출합니다.

IE인 경우 esc로 풀스크린 해제 시 => 키보드 이벤트의 이벤트 리스너를 활용합니다.

if (browserName === "IE") {
    document.addEventListener("keyup", (event) => {
        if (event.keyCode == 27 && isFull.IE){
            fullScreen.change(target);
        }
    });
}

Fullscreen API 적용 후 느낀 점.

마우스 이벤트, 키보드 이벤트를 모두 적용하여 크로스 브라우징까지 해결한 fullscreen 컨트롤 기능이 담긴 코드를 보니 정말 난잡하다는 생각이 들었습니다. 그래서 이 기능을 쓸 거면 IE를 지원대상에서 빼는 게 정신건강에 좋을 것 같긴 합니다. 어차피 Fullscreen API는 IE10 이하는 지원하지 않습니다. 따라서 Fullscreen API를 사용할 때에는 어떤 브라우저들을 어떤 버전까지 지원할지를 먼저 정한 후 사용 여부를 결정하는 것이 좋을 것 같습니다.