HTML DOM Track label 속성이란?
HTML DOM의 label 속성은 track 요소의 label 속성값을 설정하거나 반환하는 기능을 합니다. 이 속성은 자막(track) 목록에서 사용자에게 보여지는 텍스트를 지정할 때 사용됩니다. 예를 들어, 동영상 플레이어에서 자막 언어를 선택할 때 화면에 표시되는 이름이 바로 이 label 값입니다.
문법(Syntax)
label 값을 문자열로 반환받는 방법은 다음과 같습니다.
trackObject.label
label 속성에 새로운 값을 설정하는 방법은 다음과 같습니다.
trackObject.label = labelValue
예제 코드
아래 예제는 Track label 속성을 활용하여 기본(default) 트랙의 라벨 값을 가져오는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>Track label</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-label</legend>
<video id="videoSelect" controls width="250" src="sample.mp4">
<track default kind="subtitles" srclang="es" src="sample-en.srt" label="English"/>
<track kind="subtitles" srclang="en" src="sample-es.srt" label="Spanish" />
</video><br>
<input type="button" onclick="getTrackDetails()" value="기본 트랙의 라벨은 무엇인가요?">
<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 = '기본 트랙의 라벨: '+trackSelect[i].label;
}
</script>
</body>
</html>실행 결과
'기본 트랙의 라벨은 무엇인가요?' 버튼을 클릭하기 전 화면입니다.
버튼을 클릭한 후에는 JavaScript가 기본 트랙을 찾아 해당 라벨 값을 화면에 출력합니다.
코드 설명
위 예제의 동작 원리를 살펴보면 다음과 같습니다.
1. video 요소 안에 두 개의 track 요소가 정의되어 있으며, 각각 영어(English)와 스페인어(Spanish) 자막을 나타냅니다.
2. 첫 번째 track에는 default 속성이 설정되어 있어 기본 자막으로 지정됩니다.
3. 버튼을 클릭하면 getTrackDetails() 함수가 실행되고, 반복문을 통해 모든 track 요소를 검사합니다.
4. default 속성이 true인 track을 찾으면 해당 요소의 label 값을 div 영역에 출력합니다.
참고 사항
label 속성은 kind 속성값이 subtitles, captions, descriptions인 경우에 주로 사용되며, 사용자가 자막 트랙을 쉽게 구별할 수 있도록 돕는 중요한 UI 요소입니다. 또한 srclang 속성과 함께 사용하면 다국어 자막 환경을 구축하는 데 매우 유용합니다.