HTML DOM의 Video networkState 속성은 비디오의 현재 네트워크 상태를 나타내는 숫자 값을 반환합니다. 이 속성을 활용하면 미디어 리소스의 로딩 상태를 실시간으로 파악할 수 있어, 동영상 플레이어를 개발할 때 매우 유용하게 사용됩니다.
문법(Syntax)
networkState 속성의 기본 문법은 다음과 같습니다.
mediaObject.networkState
이 속성이 반환하는 값은 아래와 같습니다.
- 0 (NETWORK_EMPTY) : 미디어가 아직 초기화되지 않은 상태
- 1 (NETWORK_IDLE) : 미디어가 활성화되어 리소스를 선택했지만, 현재 네트워크를 사용하지 않는 상태
- 2 (NETWORK_LOADING) : 브라우저가 미디어 데이터를 다운로드 중인 상태
- 3 (NETWORK_NO_SOURCE) : 미디어 소스를 찾지 못한 상태
예제(Example)
다음 예제를 통해 HTML DOM Video networkState 속성의 동작 방식을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video networkState</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-networkState</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="setTrackDetails()" value="Set Source">
<input type="button" onclick="getTrackDetails()" value="Get Network 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 = 'Network State: ' + demo.networkState;
}
function setTrackDetails() {
demo.src = srcOfMedia;
demo.load();
}
</script>
</body>
</html>실행 결과(Output)
'Get Network State' 버튼을 클릭했을 때, 소스가 정의되지 않은 경우의 결과는 다음과 같습니다.
소스가 정의되어 있고 브라우저가 데이터를 다운로드 중인 상태에서 버튼을 클릭하면 아래와 같은 결과가 표시됩니다.
정리
networkState 속성은 비디오 요소의 네트워크 관련 상태를 숫자(0~3)로 반환합니다. 미디어 로딩 진행 상황을 모니터링하거나, 소스 누락 등의 오류 상황을 감지하는 로직을 구현할 때 활용할 수 있습니다.