HTML5 비디오: 긴 영상의 특정 구간 버퍼링 처리 방법

HTML5에서 긴 비디오나 오디오 파일을 다룰 때, 전체 미디어가 아닌 특정 시간대만 버퍼링해야 하는 경우가 종종 있습니다. 이럴 때 유용하게 사용할 수 있는 것이 바로 TimeRanges 객체입니다.

TimeRanges 객체란?

TimeRanges 객체는 HTML 미디어 요소(비디오·오디오)에서 겹치지 않는 여러 개의 시간 범위를 나타내는 데 사용됩니다. 각 범위는 시작 시간과 종료 시간을 가지며, 이를 통해 미디어의 어느 구간이 이미 버퍼링되었는지 확인할 수 있습니다.

TimeRanges의 주요 속성과 메서드

• length — 버퍼링된 시간 범위의 총 개수를 반환합니다.
• start(index) — 지정된 인덱스에 해당하는 시간 범위의 시작 시간을 초 단위로 반환합니다.
• end(index) — 지정된 인덱스에 해당하는 시간 범위의 종료 시간을 초 단위로 반환합니다.

버퍼링 구간 확인 예제

아래 코드 스니펫은 두 번째 버퍼링 범위(인덱스 1)의 시작 시간과 종료 시간을 확인하는 방법을 보여줍니다.

// 두 번째 버퍼링 범위의 시작 시간 출력 → 12초
myAudio.buffered.start(1);

// 두 번째 버퍼링 범위의 종료 시간 출력 → 20초
myAudio.buffered.end(1);

이 예제에서 buffered 속성은 TimeRanges 객체를 반환하며, 인덱스 1에 해당하는 범위가 12초부터 20초까지 버퍼링되어 있음을 의미합니다.

활용 팁

TimeRanges 객체를 활용하면 사용자에게 현재 버퍼링 진행 상황을 프로그레스 바로 시각적으로 표시하거나, 특정 구간이 충분히 버퍼링되기 전까지 재생을 대기시키는 등 더 나은 사용자 경험을 제공할 수 있습니다. 특히 긴 강의 영상이나 스트리밍 서비스에서 유용하게 활용됩니다.