HTML DOM의 Video readyState 속성은 현재 비디오의 준비 상태(ready state)를 나타내는 숫자 값을 반환합니다. 이 속성을 활용하면 비디오가 재생 가능한 상태인지, 데이터 로딩이 어느 단계까지 진행되었는지 확인할 수 있습니다.
문법(Syntax)
readyState 속성의 기본 사용 문법은 다음과 같습니다.
mediaObject.readyState
반환값(Return Values)
readyState 속성은 아래 표와 같이 0부터 4까지의 숫자 값을 반환하며, 각 값은 비디오의 로딩 및 재생 준비 단계를 의미합니다.
- 0 (HAVE_NOTHING) – 사용할 수 있는 정보가 전혀 없는 상태입니다.
- 1 (HAVE_METADATA) – 미디어의 메타데이터가 준비되어 비디오 탐색(seek)이 가능한 상태입니다.
- 2 (HAVE_CURRENT_DATA) – 현재 재생 위치의 데이터는 존재하지만, 다음 프레임을 재생하기에는 데이터가 부족한 상태입니다.
- 3 (HAVE_FUTURE_DATA) – 현재 위치의 데이터와 함께 최소 두 프레임 이상의 추가 데이터가 확보된 상태입니다.
- 4 (HAVE_ENOUGH_DATA) – 재생을 시작할 수 있을 만큼 충분한 데이터가 준비된 상태입니다.
이제 HTML DOM Video readyState 속성의 실제 동작을 확인할 수 있는 예제를 살펴보겠습니다.
예제(Example)
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video readyState</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-readyState</legend>
<video id="demo" width="320" controls><source src="" type="video/mp4"></video><br>
<input type="button" onclick="setTrackDetails()" value="Set Source">
<input type="button" onclick="getTrackDetails()" value="Get ready State">
<div id="divDisplay">
</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4';
function getTrackDetails() {
divDisplay.textContent = 'ready State: '+demo.readyState;
}
function setTrackDetails() {
demo.src = srcOfMedia;
demo.load();
}
</script>
</body>
</html>실행 결과(Output)
위 예제를 실행하면 버튼 클릭 시점의 비디오 준비 상태를 화면에서 바로 확인할 수 있습니다.
1. 소스가 지정되지 않은 경우
비디오 소스가 설정되지 않은 상태에서 'Get ready State' 버튼을 클릭하면, 데이터가 없으므로 0(HAVE_NOTHING)이 출력됩니다.
2. 소스가 지정된 경우
'Set Source' 버튼으로 비디오 소스를 설정한 뒤 'Get ready State' 버튼을 클릭하면, 데이터 로딩 진행 상황에 따라 1~4 사이의 값이 출력됩니다.
이처럼 readyState 속성은 스트리밍 환경이나 대용량 영상 처리 시, 재생 가능 여부를 판단하는 로직을 구현할 때 유용하게 활용됩니다.