HTML DOM의 Track srclang 속성은 <track> 요소로 지정된 텍스트 트랙(자막·캡션 등)의 언어에 해당하는 값을 가져오거나 설정할 때 사용됩니다. 이 속성은 'ko', 'en', 'es'와 같은 ISO 언어 코드 형태의 문자열을 다루며, 하나의 동영상에 여러 언어의 자막을 제공하는 멀티미디어 플레이어를 만들 때 특히 유용합니다.
문법(Syntax)
1. 값 반환하기
trackObject.srclang
srclang 속성 값을 읽으면 해당 텍스트 트랙의 언어 코드가 문자열 형태로 반환됩니다.
2. 값 설정하기
trackObject.srclang = stringValue
stringValue 자리에 새로운 언어 코드를 문자열로 지정하면 해당 텍스트 트랙의 언어가 변경됩니다.
참고: HTML 표준에 따르면 kind="subtitles"로 지정된 텍스트 트랙에는 반드시 srclang 속성이 포함되어야 합니다.
예제
다음은 Track srclang 속성을 활용한 예제입니다. 동영상에는 스페인어(es)와 영어(en) 두 개의 자막 트랙이 연결되어 있으며, 버튼을 클릭하면 default 속성이 적용된 기본 트랙의 언어를 확인하여 화면에 표시합니다.
<!DOCTYPE html>
<html>
<head>
<title>Track srclang</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-srclang</legend>
<video id="videoSelect" controls width="250" src="sample.mp4">
<track default kind="subtitles" srclang="es" src="sample-es.srt" label="Spanish" />
<track kind="subtitles" srclang="en" src="sample-en.srt" label="English" />
</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 && trackSelect[i].srclang === 'es')
divDisplay.textContent = '기본 트랙의 언어: '+trackSelect[i].label;
}
</script>
</body>
</html>실행 결과
'기본 트랙의 언어는 무엇인가요?' 버튼을 클릭하기 전의 화면입니다.
버튼을 클릭한 후의 화면입니다. JavaScript가 각 track 요소를 순회하며 default 속성과 srclang 값('es')이 일치하는 트랙을 찾아, 해당 트랙의 라벨(Spanish)이 div 영역에 출력됩니다.
