HTML DOM Track 객체 완벽 가이드 – 속성과 활용 예제

HTML DOM의 Track 객체는 HTML 문서 내의 <track> 요소를 나타냅니다. <track> 요소는 주로 비디오에 자막이나 캡션을 추가할 때 사용되며, 자바스크립트를 통해 동적으로 제어할 수 있습니다.

Track 객체 생성 방법

createElement() 메서드를 사용하여 새로운 <track> 요소를 생성할 수 있습니다.

var trackObject = document.createElement("TRACK")

이렇게 생성된 trackObject는 아래와 같은 속성들을 가집니다.

속성	설명
default	해당 트랙이 기본 트랙인지 여부를 설정하거나 반환합니다.
kind	트랙의 kind 속성값(subtitles, captions, descriptions 등)을 설정하거나 반환합니다.
label	트랙의 label 속성값, 즉 사용자에게 보여지는 트랙 제목을 설정하거나 반환합니다.
readyState	트랙 리소스의 현재 로딩 상태(NONE, LOADING, LOADED, ERROR)를 반환합니다.
src	트랙 데이터 파일의 경로인 src 속성값을 설정하거나 반환합니다.
srclang	트랙 데이터의 언어 코드(ko, en 등)를 설정하거나 반환합니다.
track	트랙 요소의 텍스트 트랙 데이터를 나타내는 TextTrack 객체를 반환합니다.

예제: Track kind 속성 확인하기

다음 예제는 비디오에 포함된 기본(default) 트랙의 kind 속성값을 버튼 클릭 시 화면에 출력하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>Track kind</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-kind</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="기본 트랙의 종류는 무엇일까요?">
            <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].kind;
    }
</script>
</body>
</html>

실행 결과

'기본 트랙의 종류는 무엇일까요?' 버튼을 클릭하기 전 화면입니다.

HTML DOM Track 객체 완벽 가이드 – 속성과 활용 예제

버튼을 클릭한 후에는 스크립트가 실행되어, default 속성이 true로 설정된 트랙을 찾아 해당 트랙의 kind 값인 subtitles가 화면에 출력됩니다.

HTML DOM Track 객체 완벽 가이드 – 속성과 활용 예제

이처럼 HTML DOM Track 객체를 활용하면 자바스크립트만으로 비디오 자막 트랙의 정보를 조회하거나 동적으로 변경할 수 있어, 다국어 지원 영상 플레이어 등을 구현할 때 매우 유용합니다.