HTML5 비디오 재생 시간(Duration)을 가져오는 방법

HTML5 비디오 재생 시간(Duration)을 가져오는 방법

HTML5 비디오 요소에서 재생 시간을 바로 조회하면 NaN이 반환되는 경우가 많습니다. 그 이유는 비디오의 메타데이터가 아직 로드되지 않았기 때문입니다. 이 문제를 해결하려면 readyState 속성을 먼저 확인해야 합니다.

readyState 속성 이해하기

readyState 속성은 0부터 4까지의 값을 가지며, 각 값은 미디어의 로드 상태를 나타냅니다.

• 0 (HAVE_NOTHING): 아무 정보도 없음
• 1 (HAVE_METADATA): 메타데이터 로드 완료 — 이 시점부터 duration 사용 가능
• 2 (HAVE_CURRENT_DATA): 현재 재생 위치의 데이터 사용 가능
• 3 (HAVE_FUTURE_DATA): 곧 재생될 데이터까지 확보
• 4 (HAVE_ENOUGH_DATA): 원활한 재생에 충분한 데이터 확보

즉, readyState 값이 1 이상이면 메타데이터가 로드된 것이므로, 그 시점에 duration 값을 읽으면 정상적으로 재생 시간을 얻을 수 있습니다.

setInterval을 활용한 구현 예제

따라서 다음과 같이 일정 간격으로 readyState를 검사하여 재생 시간을 표시할 수 있습니다.

window.setInterval(function(tm) {
    // readyState 속성 확인
    if (video.readyState > 0) {
        var duration = $('#duration').get(0);
        // 비디오 전체 재생 시간
        var video_duration = Math.round(video.duration);
        duration.firstChild.nodeValue = video_duration;
        clearInterval(tm);
    }
}, 1000);

위 코드는 1초마다 readyState를 검사하고, 메타데이터가 로드되어 값이 0보다 커지면 비디오 재생 시간을 반올림해 화면에 표시한 뒤 인터벌을 종료합니다.

참고: loadedmetadata 이벤트 활용하기

반복 검사(polling) 대신 loadedmetadata 이벤트를 사용하면 더욱 깔끔하게 처리할 수 있습니다.

video.addEventListener('loadedmetadata', function() {
    console.log(Math.round(video.duration));
});

메타데이터 로드가 완료되는 순간 한 번만 실행되므로, 불필요한 반복 검사 없이 재생 시간을 효율적으로 가져올 수 있다는 장점이 있습니다.