HTML DOM의 Video buffered 속성은 TimeRanges 객체를 반환하며, 이 객체에는 비디오의 버퍼링된 구간 길이와 해당 구간의 시작 및 끝 위치에 대한 정보가 담겨 있습니다.
buffered 속성이란?
비디오가 스트리밍되는 동안 브라우저는 재생 위치보다 앞선 데이터를 미리 다운로드하여 버퍼에 저장합니다. buffered 속성을 사용하면 현재까지 얼마나 많은 비디오 데이터가 로드되었는지 확인할 수 있으며, 이를 활용해 사용자에게 버퍼링 진행 상황을 시각적으로 표시할 수 있습니다.
반환되는 TimeRanges 객체는 여러 개의 시간 범위(time range)를 포함할 수 있으며, 각 범위에는 시작 지점과 끝 지점(초 단위)이 정의되어 있습니다.
문법(Syntax)
다음은 buffered 속성의 기본 문법입니다.
mediaObject.buffered
TimeRanges 객체에서 특정 범위의 끝 지점을 가져오려면 다음과 같이 사용합니다.
mediaObject.buffered.end(index)
- end(index) : 지정한 인덱스의 버퍼링 범위가 끝나는 시점(초)을 반환합니다.
- start(index) : 지정한 인덱스의 버퍼링 범위가 시작되는 시점(초)을 반환합니다.
- length : 버퍼링된 시간 범위의 개수를 반환합니다.
예제 코드
아래 예제는 버튼을 클릭하면 비디오의 버퍼링된 초(second) 수를 화면에 표시하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video buffered</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-buffered</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="Get Buffered Seconds">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
demo.buffered = true;
function getTrackDetails() {
divDisplay.textContent = 'Buffered: ' + demo.buffered.end(0) + ' seconds';
}
</script>
</body>
</html>
실행 결과
비디오를 재생하기 전에 'Get Buffered Seconds' 버튼을 클릭하면, 아직 데이터가 거의 버퍼링되지 않았기 때문에 작은 값이 표시됩니다.
비디오를 일정 부분 재생한 후 버튼을 클릭하면, 재생 과정에서 추가로 버퍼링된 만큼 더 큰 값이 표시됩니다.
정리
buffered 속성은 HTML5 비디오 요소의 로딩 상태를 실시간으로 파악할 때 유용합니다. 커스텀 비디오 플레이어를 제작하거나 프로그레스 바에 버퍼링 구간을 표시하고 싶을 때 TimeRanges 객체의 start(), end(), length 메서드와 속성을 함께 활용하면 됩니다.