[유튜브 클론코딩] 8.2 Mute / UnMute

8.2 Mute / UnMute

🍙 이번시간에 해볼 것 :  🔊볼륨 ON(Unmute)  / 🔇볼륨OFF(Mute)

 

참고: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

HTMLMediaElement - Web APIs | MDN

🍳videoPlayer.pug에 id추가하기

늘 그랬듯이, videoPlayer.pug 파일에서 볼륨버튼에 해당하는 span태그에 아이디를 추가해준다.

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 

                    i.fas.fa-expand

↑ videoPlayer.pug

 

🍳videoPlayer.js 작성하기

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

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

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

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



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 init(){

    playBtn.addEventListener("click", handlePlayClick);

    volumeBtn.addEventListener("click", handleVolumeClick);

}



if(videoContainer){

    init();

}

재생버튼이랑 정지버튼은 내가 영상을 재생중일때에는 ⏸ 버튼이 떠야 하고

정지상태일 때는 ▶ 버튼이 떠야 하게 반대로 해야 한다면

음소거버튼은 현재 상태를 보여주는게 더 직관적으로 이해가 되니까

비디오가 음소거된 상태라면 클릭했을 떄 음소거를 해제하고, 현재 소리가 나는 상태이므로 🔊 가 나오게 한다.

비디오가 음소거되어있지 않다면 클릭했을 때 음소거 상태로 만들고 현재 음소거 상태이므로 🔇로 지정해준다.