video player 만들기

markus·2021년 7월 27일
0

Youtube Clone

목록 보기
14/16

이번 시간에는 video player를 만들어보자.

HTMLMediaElement

필요한 EVENT

  1. loadedmetadata
  2. timeupdate
  3. input

그럼 만들어보자.

loadedmetadata

metadata가 load되면 알려주는 event다.

metadata의 사전적 정의는 "데이터에 대한 데이터"라고 한다.
예를 들어, 사진이라는 데이터는 카메라 자체 정보, 촬영 당시의 시간, 노출, 플래시 사용여부, 해상도, 사진 크기 등의 정보를 담고 있다. 이때 오렌지색의 요소들을 "metadata"라고 한다.

const timeForm = (time) => {
  let temp = time;

  // int
  let hours = parseInt(temp / 3600);
  temp %= 3600;
  let minutes = parseInt(temp / 60);
  temp %= 60;
  let seconds = temp % 60;

  // string
  hours = String(hours).padStart(2, "0");
  minutes = String(minutes).padStart(2, "0");
  seconds = String(seconds).padStart(2, "0");

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

const getTotalTime = () => {
  const time = parseInt(video.duration);
  totalTime.innerText = timeForm(time);
  timeline.max = time;
};

if (videoContainer) {
  video.addEventListener("loadedmetadata", getTotalTime);
}

video.duration을 통해 video의 전체 시간을 알아냈다.

timeupdate

currentTime이 바뀌면 알려주는 event이다.

...

const getCurrentTime = () => {
  const time = parseInt(video.currentTime);
  currentTime.innerText = timeForm(time);
  timeline.value = time;
};

if (videoContainer) {
  video.addEventListener("loadedmetadata", getTotalTime);
  video.addEventListener("timeupdate", getCurrentTime);
}

video.currentTime을 통해 video의 현재 시간을 알아냈다. 또한 timeline.value = time으로 비디오 재생바와 연결시켰다. 이제 현재 시간이 바뀌면 재생바도 함께 바뀐다.

input

input, select, textarea tag의 value가 바뀌면 알려주는 event다.

...

const resetCurrentTime = () => {
  const time = timeline.value;
  video.currentTime = time;
};

if (videoContainer) {
  video.addEventListener("loadedmetadata", getTotalTime);
  video.addEventListener("timeupdate", getCurrentTime);
  timeline.addEventListener("input", resetCurrentTime);
}

video.currentTimetimeline.value로 바꾸고 있다. currentTime이 바뀌었으니 timeupdate event가 발생하고 getCurrentTime 함수가 호출된다. 따라서, 재생바를 통해 현재 시간을 조절할 수 있다.


Reference

metadata
metadata

0개의 댓글