HTML DOM Video seekable 속성 – 동영상 탐색 가능 범위 확인하기

HTML DOM Video seekable 속성이란?

HTML DOM의 Video seekable 속성은 TimeRanges 객체를 반환합니다. 이 객체에는 현재 동영상에서 사용자가 탐색(seek)할 수 있는 범위에 대한 정보가 담겨 있으며, 탐색 가능 구간의 길이와 시작 위치(start), 끝 위치(end)를 확인할 수 있습니다.

동영상이 스트리밍되는 동안 아직 버퍼링되지 않은 구간은 탐색이 불가능할 수 있습니다. 이럴 때 seekable 속성을 활용하면 실제로 이동 가능한 시간대를 정확히 파악할 수 있어, 플레이어 UI를 만들거나 남은 재생 시간을 표시하는 기능을 구현할 때 매우 유용합니다.

문법(Syntax)

seekable 속성의 기본 문법은 다음과 같습니다.

mediaObject.seekable

반환된 TimeRanges 객체는 다음 메서드를 제공합니다.

start(index) – 지정된 인덱스의 탐색 가능 범위 시작 시간(초)을 반환합니다.
end(index) – 지정된 인덱스의 탐색 가능 범위 끝 시간(초)을 반환합니다.
length – 탐색 가능 범위의 개수를 반환합니다.

예제(Example)

버튼을 클릭하면 동영상의 탐색 가능 범위를 화면에 출력하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video seekable</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-Video-seekable</legend>
            <video id="demo" width="320" controls><source
            src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
            <input type="button" onclick="getTrackDetails()" value="남은 시청 가능 시간은?">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var divDisplay = document.getElementById("divDisplay");
        var demo = document.getElementById("demo");
        function getTrackDetails() {
            divDisplay.textContent = '프리미엄 시청자이므로 '+demo.seekable.start(0)+' -
            '+demo.seekable.end(0)+' 구간까지 탐색할 수 있습니다';
        }
    </script>
</body>
</html>

코드 설명

<video> 요소에 controls 속성을 추가해 기본 재생 컨트롤을 활성화했습니다.
버튼 클릭 시 getTrackDetails() 함수가 호출됩니다.
함수 내부에서 demo.seekable.start(0)으로 탐색 가능 범위의 시작 시간을, demo.seekable.end(0)으로 끝 시간을 가져와 결과를 화면에 출력합니다.

실행 결과(Output)

'남은 시청 가능 시간은?' 버튼을 클릭하기 전 화면입니다.

HTML DOM Video seekable 속성 – 동영상 탐색 가능 범위 확인하기

버튼을 클릭한 후에는 탐색 가능한 시간 범위가 div 영역에 표시됩니다.

HTML DOM Video seekable 속성 – 동영상 탐색 가능 범위 확인하기

정리

HTML DOM의 Video seekable 속성은 동영상에서 실제로 탐색 가능한 구간 정보를 TimeRanges 객체 형태로 제공합니다. start()와 end() 메서드를 조합하면 버퍼링 상태나 프리미엄 구간 등 다양한 조건에 맞춰 플레이어 기능을 확장할 수 있습니다.