<Custom Player> Javascript - fullscreen

이번 시간에는 비디오 전체화면 기능을 추가해보겠습니다.

project

youtube
  |views
    |mixins
     *|videoPlayer.pug
  |assets
    |js
     *|videoPlayer.js

videoPlayer.pug

.videoPlayer#jsVideoContainer
  video(src=video.src)
  .videoPlayer__controls
    .videoPlayer__column
    /*생략*/
  .videoPlayer__column
    span.expand#jsFullscreen
      i.fas.fa-expand

videoPlayer.js

• requestFullscreen
  어떤 요소든 전체 화면으로 만듭니다. 참고 또한, video 자체가 아니라 videoContainer를 fullscreen으로 만들건데요. 그 이유는 video만 fullscreen으로 하면 우리가 정의해준 controls가 포함되지 않기 때문입니다.
• exitFullscreen
  전체화면에서 나오도록 합니다. 전체화면이 된 요소에 사용하지 않고 document에 사용합니다.
• 브라우저 호환성
  브라우저별로 requestFullscreen을 사용하기 위해서 vendor prefix or different name을 요구하기 때문에 조건문을 사용해서 브라우저 호환성을 높이도록 하겠습니다.

const videoContainer = document.querySelector('#jsVideoContainer');
const fullscreen = document.querySelector('#jsFullscreen');

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();
  }
  fullScreen.innerHTML = '<i class="fas fa-compress"></i>';
  fullscreen.removeEventListener('click', goFullscreen);
  fullscreen.addEventListener('click', exitFullscreen);
}

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

init(){
  fullscreen.addEventListener('click', goFullscreen);
}

if(videoContainer){
  init();
}

muted와 달리 현재 상태를 알 수 없어서 goFullscreen과 exitFullscreen 두개의 함수를 만들어서 eventListener를 지우고 추가하면서 fullscreen process를 구축하였습니다.