Duration and Current Time

• event 중 loaddeddata이용할 것임.
  -> metadata: video를 제외한 모든 데이터를 말함. 예를 들어 비디오의 시간, 가로 세로 길이 등 비디오에서 움직이는 이미지들 외의 모든 데이터를 말함.

• attribute 중 Duration attributes 이용 -> 영상 총 길이

• event 중 timeupdate 이용 -> 현재 영상 진행 시간

1. watch.pug 수정

//변경 전
span#time 00:00/00:00

//변경 후
div
  span#currenTime 00:00
  span  / 
  span#totalTime 00:00

2. videoPlayer.js

const time = document.getElementById("time");// <- 삭제

//추가
const currenTime = document.getElementById("currenTime");
const totalTime = document.getElementById("totalTime");

const handleLoadedMetadata = () => {
    totalTime.innerText = Math.floor(video.duration);//loadedmetadata event를 사용하면, duration을 그냥 가져올 수 있음.(인수로 안 받아도 됨)
};

const handleTimeUpdate = () => {
    //console.log(video.currentTime); currentTime이 자동으로 현재 비디오의 진행 시간을 알려줌.
  	currenTime.innerText = Math.floor(video.currentTime);
};


video.addEventListener("loadedmetadata", handleLoadedMetadata);
video.addEventListener("timeupdate", handleTimeUpdate);