HTML DOM Track default 속성이란?
HTML DOM의 Track default 속성은 해당 트랙(track)이 사용자의 별도 선택이 없는 한 기본적으로 활성화되어야 하는지 여부를 나타내는 불리언(Boolean) 값을 설정하거나 반환합니다. 주로 비디오나 오디오 요소에서 자막 트랙의 기본 활성화 상태를 제어할 때 사용됩니다.
주의: 하나의 미디어(audio/video) 요소에는 default로 지정된 트랙이 하나만 존재해야 합니다.
문법(Syntax)
1. 불리언 값 반환
trackObject.default
2. default 속성 설정
trackObject.default = booleanValue
여기서 booleanValue는 다음 두 가지 값 중 하나입니다.
| booleanValue | 설명 |
|---|---|
| true | 트랙이 기본적으로 활성화됨을 의미합니다. |
| false | 사용자가 직접 선택하지 않는 한 트랙이 활성화되지 않음을 의미합니다. |
Track default 속성 예제
다음 예제는 비디오 요소에 포함된 여러 자막 트랙 중 default로 설정된 트랙을 찾아 화면에 표시하는 코드입니다.
코드
<!DOCTYPE html>
<html>
<head>
<title>Track default</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Track-default</legend>
<video id="videoSelect" controls width="250" src="sample.mp4">
<track default kind="subtitles" srclang="es" src="sample-es.srt"/>
<track kind="subtitles" srclang="en" src="sample-en.srt"/>
</video><br>
<input type="button" onclick="getTrackDetails()" value="What is the default track?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var trackSelect = document.getElementsByTagName("track");
function getTrackDetails() {
for(var i=0; i<trackSelect.length; i++)
if(trackSelect[i].default)
divDisplay.textContent = 'Default track for video: '+trackSelect[i].srclang;
}
</script>
</body>
</html>실행 결과
'What is the default track?' 버튼을 클릭하기 전 화면은 다음과 같습니다.
버튼을 클릭한 후에는 스크립트가 모든 트랙을 순회하며 default 속성이 true인 트랙을 찾아, 해당 트랙의 언어 코드(srclang)를 화면에 출력합니다. 위 예제에서는 스페인어(es) 자막 트랙이 default로 지정되어 있으므로 다음과 같이 표시됩니다.
핵심 정리
Track default 속성은 읽기와 쓰기가 모두 가능한 불리언 속성으로, 미디어 재생 시 어떤 자막 트랙이 우선적으로 활성화될지 결정하는 중요한 역할을 합니다. 다국어 자막을 지원하는 웹 페이지를 개발할 때 유용하게 활용할 수 있습니다.