이번 시간에는 video player를 만들어보자.
그럼 만들어보자.
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의 전체 시간을 알아냈다.
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, 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.currentTime
을 timeline.value
로 바꾸고 있다. currentTime이 바뀌었으니 timeupdate event가 발생하고 getCurrentTime 함수가 호출된다. 따라서, 재생바를 통해 현재 시간을 조절할 수 있다.