[유튜브 클론코딩] 8.3 Enter Fullscreen / Exit Fullscreen

8.3 Enter Fullscreen / Exit Fullscreen

🥞이번시간에 해볼 것: 누르면 전체 화면이 되고 다시 누르면 전체화면이 종료되는 버튼을 기능을 구현해보겠다.

 

🍪videoPlayer.pug에 아이디 추가하기

늘 그랬듯이 videoPlayer.pug에 아이디를 추가한다. (#jsFullScreen)

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.pug

 

🍪videoPlayer.js 작성하기

그런데 스크린은 현재 비디오플레이어 상태가 fullscreen상태인지 값을 체크할 수가 없다.

그래서 우리는 eventListener를 변경하고 제거해주는 방식으로 처리할 것이다.

**우리는 원하는 만큼 이벤트 리스너를 추가할 수 있고 또한 제거도 가능하다.

 

🍪전체화면이 되도록 만들기( element.requestFullscreen() )

const videoContainer = document.getElementById("jsVideoPlayer");

const videoPlayer = document.querySelector("#jsVideoPlayer video");

const playBtn = document.getElementById("jsPlayButton");

const volumeBtn = document.getElementById("jsVolumeButton");

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



function handlePlayClick(){

    if(videoPlayer.paused){

        videoPlayer.play();

        playBtn.innerHTML = '<i class="fas fa-pause"></i>';

    }else{

        videoPlayer.pause();

        playBtn.innerHTML = '<i class="fas fa-play"></i>';

    }

}

function handleVolumeClick(){

    if(videoPlayer.muted){ //비디오가 음소거 되어 있으면

        videoPlayer.muted = false;  //음소거를 해제한다.

        volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>'; // 소리나는 아이콘

        

    }else{ // 비디오가 음소거되어있지 않으면

        videoPlayer.muted = true; // 음소거 상태로 만든다.

        volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>' // 음소거 아이콘

    }

}

function goFullScreen(){

    videoContainer.requestFullscreen(); //전체 화면이 되게 만들기

    fullScreenBtn.innerHTML = '<i class="fas fa-compress"></i>'//아이콘 변경하기(작은 화면 아이콘)

    fullScreenBtn.removeEventListener("click", goFullScreen);

}



function init(){

    playBtn.addEventListener("click", handlePlayClick);

    volumeBtn.addEventListener("click", handleVolumeClick);

    fullScreenBtn.addEventListener("click", goFullScreen);

}



if(videoContainer){

    init();

}

↑ videoPlayer.js

참고로 니코쌤은 .requestFullscreen() 만 적었을 때, 지금 시점보다 몇 년 전 강좌라서 그런지 크롬에서 쓰려면 webkit을 붙여서 .webkitRequestFullscreen(); 라고 적어야 작동이 되는데 나는 지금 해보니까 그냥 webkit을 붙이지 않아도 작동이 된다.

(구글에서 쓰고 싶으면 webkit, firefox에서 쓰고 싶으면 moz, ie는 ie혹은 ms - 이런건 mdn에서 검색해보면 브라우저 지원 거기에 다 써있다)

 

🍪 requestFullscreen()을 사용할 때 주의할 점

이 메소드의 대상이 될 객체를 전체 화면이 되게 해주는 것이므로 잘 생각해야 한다.

우리는 단순히 비디오만 커지게하는게 아니라 볼륨버튼, 재생/정지버튼, 전체화면/축소버튼과 같은 비디오를 컨트롤하는 것까지 커져야 하니까 그 대상은 videoContainer가 되겠다.

videoContainer.requestFullscreen()로 써줘야 하는 것이다!!

 

그리고 전체화면에서 비디오를 재생할 때에는 비디오의 width가 100%로 설정되어 있어야 한다.(이거 css에서 하면 된다. 어차피 나는 안고쳐도 잘 되어있었기 때문에 상관은 없었지만 나중에 참고하기 위해 적어둔다)

 

🍪전체화면을 나가는 기능 만들기(document.exitFullscreen() 사용하기)

 

const videoContainer = document.getElementById("jsVideoPlayer");

const videoPlayer = document.querySelector("#jsVideoPlayer video");

const playBtn = document.getElementById("jsPlayButton");

const volumeBtn = document.getElementById("jsVolumeButton");

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



function handlePlayClick(){

    if(videoPlayer.paused){

        videoPlayer.play();

        playBtn.innerHTML = '<i class="fas fa-pause"></i>';

    }else{

        videoPlayer.pause();

        playBtn.innerHTML = '<i class="fas fa-play"></i>';

    }

}

function handleVolumeClick(){

    if(videoPlayer.muted){ //비디오가 음소거 되어 있으면

        videoPlayer.muted = false;  //음소거를 해제한다.

        volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>'; // 소리나는 아이콘

        

    }else{ // 비디오가 음소거되어있지 않으면

        videoPlayer.muted = true; // 음소거 상태로 만든다.

        volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>' // 음소거 아이콘

    }

}

function exitFullScreen(){

    document.exitFullscreen();//전체화면을 종료하기

    fullScreenBtn.innerHTML = '<i class="fas fa-expand"></i>'; // 아이콘 변경하기(전체 화면 아이콘)

    fullScreenBtn.removeEventListener("click", exitFullScreen);

    fullScreenBtn.addEventListener("click", goFullScreen);

}



function goFullScreen(){

    videoContainer.requestFullscreen(); //전체 화면이 되게 만들기

    fullScreenBtn.innerHTML = '<i class="fas fa-compress"></i>'//아이콘 변경하기(작은 화면 아이콘)

    fullScreenBtn.removeEventListener("click", goFullScreen);

    fullScreenBtn.addEventListener("click", exitFullScreen);

}

function init(){

    playBtn.addEventListener("click", handlePlayClick);

    volumeBtn.addEventListener("click", handleVolumeClick);

    fullScreenBtn.addEventListener("click", goFullScreen);

}

if(videoContainer){

    init();

}

↑ videoPlayer.js

전체화면을 요청하는 메소드는 대상이 element였다면 전체화면을 종료하는 메소드 exitFullscreen은 document가 대상이 된다. 그러므로 document.exitFullscreen()이라고 적어주어야 한다.