Full Screen

Fullscreen API
Fullscreen API 는 특정 요소 Element(와 해당 자손들을)를 full-screen mode로 표시하고, 더 이상 필요하지 않으면 full-screen mode를 종료하는 메서드를 추가합니다.

• Element.requestFullscreen() (en-US) ❗️
  유저 에이전트가 지정한 요소(그리고 그 자손들까지)를 full-screen mode로 설정하고, 브라우저의 모든 UI 요소와 다른 모든 애플리케이션을 화면에서 제거하도록 요구합니다. full-screen mode가 활성화되면 Promise resolved를 반환합니다.

• Document.exitFullscreen() (en-US) ❗️
  user agent 가 full-screen mode에서 창 모드로 다시 전환되도록 요청합니다. full-screen mode가 완전히 종료되면 Promise resolved 를 반환합니다.

DocumentOrShadowRoot.fullscreenElement (en-US) (사용 추천)
fullscreenElement 속성은 DOM(혹은 shadow DOM)에서 현재 full-screen mode로 표시되는 요소Element를 알려줍니다. 이것이 null인 경우, document는 full-screen mode가 아닙니다.

Document.fullscreen (en-US) (더 이상 사용되지 않는 속성)
(fullscreenElement처럼 풀스크린을 감지할 수 있지만 사용 비추천)
문서에 현재 full-screen mode로 표시되는 요소가 있는 경우 true, 그렇지 않으면 false의 Boolean 값입니다.

https://developer.mozilla.org/ko/docs/Web/API/Fullscreen_API

1. watch.pug

div#videoContainer
        video(src="/" + video.fileUrl)
        div 
            button#play Play 
            button#mute Mute 
            input(type="range",step="0.1",value=0.5 ,min="0", max="1")#volume
            div
                span#currenTime 00:00
                span  / 
                span#totalTime 00:00
            div 
                input(type="range",step="0.5",value=0 ,min="0")#timeline
            div 
                button#fullScreen Enter Full Screen

2. videoPlayer.js

const fullScreenBtn = document.getElementById("fullScreen");
const videoContainer = document.getElementById("videoContainer");// fullScreen으로 만들 때 videoContainer를 full스크린으로 해야 내가 만든 버튼까지도 풀스크린에 포함할 수 있음. video만 풀 스크린 하면 비디오만 커짐.

const handleFullscreen = () => {
    const fullscreen = document.fullscreenElement;//현재 fullScreen이 적용된 개체를 알려줌. -> fullScreenContainer / 만약 fullScreen이 없으면 null을 return
    if(fullscreen){
        document.exitFullscreen();// document.exitFullscreen() : document method임. 풀스크린 나가기임.
        fullScreenBtn.innerText ="Enter Full Screen";
    } else{
        videoContainer.requestFullscreen();//elemet.requestFullscreen() : fullscreen으로 만들어줌.
        fullScreenBtn.innerText ="Exit Full Screen";
    }
};


fullScreenBtn.addEventListener("click", handleFullscreen);