[11] #Bonus Time - 2) 영상 시간 안뜨는 버그 해결하기

영상 시간 안뜨는 버그 해결하기(Blob Duration Bug)

나도 전체 영상 시간이 NaN NaN NaN으로 나오는 영상이 있었는데, 니콜라스도 그 버그를 고치는 것을 알려줘서 다행이었다.

Blob이 영상 전체 시간을 가지고 있지 않아서 그렇게 나온 것이라고 한다.

 

https://github.com/evictor/get-blob-duration

여기 get-blob-duration 이라는 라이브러리가 있다. 내가 하고 싶은 걸 해주는 녀석이다.

이게 무엇을 말하는 거냐면 Blob의 길이(duration)를 알려주는 것이다.

 

get-blob-duration 설치하기

npm install get-blob-duration

 

videoPlayer.js에 가서 수정하기

import getBlobDuration from "get-blob-duration";

우선 get-blob-duration을 videoPlayer.js에 import 해준다.

 

async function setTotalTime(){

    const duration = await getBlobDuration(videoPlayer.src);

    const totalTimeString = formatDate(duration);

    totalTime.innerHTML = totalTimeString;

    setInterval(getCurrentTime, 1000);

};

↑ videoPlayer.js

그리고 다음과 같이 수정하면 된다. get-blob-duration의 깃허브 홈페이지를 가면 설명이 잘 되어있으니 그냥 그걸 응용하면 된다. 이제 다 잘 뜬다.