[유튜브 클론코딩] 8.4 Total time and Current time

8.4 Total time and Current time

많은 브라우저에서 동작할 수 있도록 if문을 이용해서 goFullScreen과 exitFullScreen을 수정한다.

function exitFullScreen(){

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

    if(document.exitFullscreen){

        document.exitFullscreen();

    }else if(document.mozCancelFullScreen){

        document.mozCancelFullScreen();

    }else if(document.webkitExitFullscreen){

        document.webkitExitFullscreen();

    }else if(document.msExitFullscreen){

        document.msExitFullscreen();

    }

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

    fullScreenBtn.removeEventListener("click", exitFullScreen);

    fullScreenBtn.addEventListener("click", goFullScreen);

}

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();

    }

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

    fullScreenBtn.removeEventListener("click", goFullScreen);

    fullScreenBtn.addEventListener("click", exitFullScreen);

}

↑ videoPlayer.js

exitFullscreen()에서 exitFullscreen이 document에 존재하는지 체크 , 존재하면 document.exitFullscreen()을 실행 … 이런 식

 

const formatDate = (seconds) => {

    const secondsNumber = parseInt(seconds, 10);

    let hours = Math.floor(secondsNumber / 3600);

    let minutes = Math.floor((secondsNumber - hours * 3600) / 60);

    let totalSeconds = secondsNumber - hours * 3600 - minutes * 60;

    if(hours < 10){

        hours = `0${hours}`;

    }

    if(minutes < 10){

        minutes = `0${minutes}`;

    }

    if(seconds < 10){

        totalSeconds = `0${totalSeconds}`;

    }

    return `${hours}:${minutes}:${totalSeconds}`;

}

seconds 라는 input을 가지고 parseInt를 이용해서 10진법 숫자로 바꾸어 secondsNumber에 저장한다.

(seconds는 소수점이 있는 숫자일 것이므로 parseInt로 정수로 만들어주는거인듯)

 

secondsNumber를 가지고 우리는 hours, minutes, totalSeconds를 구할 수 있다.

 

( 예를 들어 5000이라는 seconds를 가지고 우리는 secondsNumber로 5000을 숫자로 저장하고,

5000 / 3600을 해서 몫만 저장해서 hours를 구하고 - hours: 1

(5000- 3600 * 1) / 60을 해서 몫만 가지고 minutes를 구하고 - minutes: 23

5000 - 3600* 1 - 60 * 23을 해서 totalSeconds를 구한다 - totalSeconds는 20)

 

각각 시 분 초가 10보다 작으면 0을 붙여서 저장하고  저런 string을  return해준다.

아무튼 이걸 하려면 비디오의 영상 시간을 알아내는 프로퍼티가 필요할 것이다.

 

duration 이용하기

HTMLMediaElement.duration이라는 프로퍼티는

실제로 라끼남 영상이 11분 42초 짜리인데 duration을 이용해서 받아보니 702.542948 라고 뜬다

11분42초 = 702초 이다.

 

currentTime 이용하기

🍩videoPlayer.pug에서 아이디 추가하기

 

mixin videoPlayer(video = {})

    .videoPlayer#jsVideoPlayer

        video(src=`/${video.src}`)

        .videoPlayer__controls 

            .videoPlayer__column

                span#jsVolumeButton

                    i.fas.fa-volume-up

                span

                    span#currentTime 00:00:00

                    |/

                    span#totalTime 00:00:00

            .videoPlayer__column

                span#jsPlayButton

                    i.fas.fa-play

            .videoPlayer__column

                span#jsFullScreen

                    i.fas.fa-expand

↑ videoPlayer.pug

 

currentTime과 totalTime을 아이디로 추가한다.

 

🍩videoPlayer.js에서 작업하기

 

const currentTime = document.getElementById("currentTime");

const totalTime = document.getElementById("totalTime");

아까 추가한 아이디를 getElementById를 이용해서 객체를 가져온다.

 

function init(){

    playBtn.addEventListener("click", handlePlayClick);

    volumeBtn.addEventListener("click", handleVolumeClick);

    fullScreenBtn.addEventListener("click", goFullScreen);

    setTotalTime();

}

setTotalTime을 init()안에서 실행이 되도록 하고 setTotalTime 함수를 작성한다.

 

function setTotalTime(){

    const totalTimeString = formatDate(videoPlayer.duration);

    totalTime.innerHTML = totalTimeString;

}

아까 formatDate라는 함수를 작성했었으니 그 안에 videoPlayer의 duration을 넣어주고 그것은 문자열을 반환하기 때문에 그걸 totalTimeString에 저장한다. 그리고 totalTime의 innerHTML로 넣어준다.

 

여기까지 해보고 실행해보면 뭔가 이상하다?!

 

시간이 NaN:NaN:NaN으로 뜬다.

이는 비디오가 로드되지 않았기 때문이다. 비디오가 로드되지 않은 상태에서 console.log로 duration을 확인해보면 NaN이라고 뜬다.

따라서 이것을 이벤트로 처리해준다. 비디오가 로드되었을 때 하는 것으로

 

🍩loadedmetadata 이용하기

function init(){

    playBtn.addEventListener("click", handlePlayClick);

    volumeBtn.addEventListener("click", handleVolumeClick);

    fullScreenBtn.addEventListener("click", goFullScreen);

    videoPlayer.addEventListener("loadedmetadata", setTotalTime);

}

metadata가 로드가 되면 setTotalTime을 실행하도록 했더니 아주 잘 된다.

 

🍩currentTime(현재 시간) 얻기

function getCurrentTime(){

    currentTime.innerHTML = formatDate(videoPlayer.currentTime);

}

formatDate를 해주어야 00:00:00 이런 식으로 해줄 수 있다는 것 알고 있지?

 

그런데 여기서 중요한 것은, setTotalTime함수나 getCurrentTime함수나 모두 한번만 실행이 된다.

시간이 경과함에 따라 계속 getCurrentTime은 늘어나야 되는데, 매 초마다 함수를 실행시키려면 어떻게 해야할까?

setInterval을 사용해야 한다. setInterval은 매초마다 어떤 함수를 실행시켜주는 함수이다.

 

🍩setInterval을 사용하여 매 초마다 함수가 실행되도록 하기

function setTotalTime(){

    const totalTimeString = formatDate(videoPlayer.duration);

    totalTime.innerHTML = totalTimeString;

    setInterval(getCurrentTime, 1000);

}

이렇게 되면 getCurrentTime함수가 1초마다 실행된다.