JavaScript video time line

설치

#npm install get-blob-duration

npm install get-blob-duration

  Convenience method to patch Chromium bug when getting duration of HTML5 video or audio Blob.

videoPlayer.js

videoPlayer.pug

 

init()에 다음 함수를 추가한다.

init()

  getBlobDuration의 parameter는 video의 src값을 준다. 그러면 반환 값으로 video의 총 영상 길이를 초 단위로 넘겨준다. 나는 영상 길이를 hh:mm:ss로 나타내고 싶기 때문에, duration을 가공해야 한다. hh:mm:ss 형식으로 영상 길이를 가공하는 함수가 formatDate()다.

  formatDate(duration)으로 구한 영상 길이는 totalTime.innerHTML을 이용하여 값을 설정한다. 그리고 영상의 현재 시간은 setInterval(getCurrentTime, 1000)으로 매 초마다 갱신한다.

setTotalTime()

formatDate()

video의 현재 시간을 구하는 API는 이미 있기 때문에 video(videoPlayer).currentTime을 사용해서 구한다.

getCurrentTime

참고 자료

• 노마드 코더의 유튜브 클론 강의
• get-blob-duration
• video.currentTime MDN

소스 코드

github.com/zpskek/wetube-v3/commit/945876059076b57db9ec524227d9679adcfc9dac