HTML DOM Track kind 속성 완벽 정리 – 텍스트 트랙 유형 지정 방법

HTML DOM의 Track kind 속성은 <track> 요소의 kind 속성 값을 가져오거나 설정하여, 해당 텍스트 트랙이 어떤 용도로 사용되는지 그 유형을 지정합니다.

다음은 기본적인 문법입니다.

문법

문자열 값 반환

trackObject.kind

kind 값 설정

trackObject.kind = stringValue

여기서 stringValue에는 아래 표의 값들을 사용할 수 있습니다.

kind 속성값 종류

값	설명
captions	대사와 음향 효과에 대한 번역을 제공합니다. 청각 장애가 있는 사용자에게 적합합니다.
chapters	챕터 제목을 정의합니다. 미디어 리소스를 탐색할 때 사용됩니다.
descriptions	비디오 콘텐츠에 대한 텍스트 설명을 정의합니다. 시각 장애가 있는 사용자에게 적합합니다.
metadata	사용자에게는 보이지 않으며, 주로 스크립트에서 활용하기 위한 데이터를 담습니다.
subtitles	비디오에 자막을 표시하는 데 사용됩니다.

그럼 Track 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 = '비디오 트랙의 kind 값: '+trackSelect[i].kind;
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM Track kind 속성 완벽 정리 – 텍스트 트랙 유형 지정 방법

버튼을 클릭한 후 화면입니다. 기본으로 지정된 트랙의 kind 값이 출력되는 것을 확인할 수 있습니다.

HTML DOM Track kind 속성 완벽 정리 – 텍스트 트랙 유형 지정 방법