<Custom Player> Javascript - timeline

재생중인 video의 전체시간과 현재 재생중인 위치를 표시하도록 하겠습니다.

project

youtube
  |views
    |mixins
     *|videoPlayer.pug
  |assets
    |js
     *|videoPlayer.js

videoPlayer.pug

span.timeline
  span#jsCurrentTime 00:00:00
  span |
  span#jsTotalTime 00:00:00

videoPlayer.js

• video duration property
  video의 전체시간을 초로 반환해주는 property입니다.
• video currentTime
  video의 현재 재생시간을 초로 반환해주는 property입니다.
• setInterval
  video currentTime property는 현재 재생시간을 한번만 반환해주므로 setInterval함수를 사용해서 1초마다 currentTime을 업데이트 해줍니다.
• loadedmetadata
  metadata는 흔히 data의 data라고 표현합니다. video의 정보라고 생각할 수도 있습니다. mdn에서는 loadedmetada에 대해 이렇게 정의합니다.

  The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.

이 event를 사용하지 않고 video의 duration을 불러오게 되면 nan만을 확인할 수 있습니다.

• formatDate
  초를 입력받고 시간 분 초로 이루어진 string을 반환해주는 함수입니다.

const videoContainer = document.querySelector("#jsVideoContainer");
const videoPlayer = document.querySelector("#jsVideoPlayer");
const currentTime = document.querySelector("#jsCurrentTime");
const totalTime = document.querySelector("#jsTotalTime"); 

function setTime(){
  totalTime.innterHTML = formatDate(videoPlayer.duration);
  setInterval(()=>{
    currentTime.innerHTML = formatDate(videoPlayer.currentTime);
  }, 1000);
}

function init(){
  videoPlayer.addEventListener("loadedMetadata", setTime);
}

function 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 (totalSeconds < 10) {
    totalSeconds = `0${totalSeconds}`;
  }	
  return `${hours}:${minutes}:${totalSeconds}`;
};

if(videoContainer){
  init();
}