HTML5에서는 <track> 태그를 사용하여 비디오나 오디오 등 미디어 플레이어에 자막, 캡션, 설명과 같은 텍스트 트랙을 추가할 수 있습니다.
텍스트 트랙이란?
텍스트 트랙은 영상 재생 중 화면 위에 표시되는 자막이나 부가 정보를 의미합니다. <track> 태그는 반드시 <video> 또는 <audio> 요소 내부에 위치해야 하며, WebVTT(.vtt) 형식의 자막 파일을 연결합니다.
<track> 태그의 주요 속성은 다음과 같습니다.
- src: 자막 파일(.vtt)의 경로를 지정합니다.
- kind: 텍스트 트랙의 종류를 지정합니다. (예: subtitles, captions, descriptions, chapters, metadata)
- srclang: 자막의 언어 코드를 지정합니다. (예: en, ko, ru)
- label: 플레이어에 표시될 자막의 이름을 지정합니다.
- default: 이 속성이 설정된 자막이 기본으로 활성화됩니다.
예제 코드
아래 코드를 실행하면 HTML5 미디어 플레이어에 텍스트 트랙을 추가하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE HTML> <html> <body> <video width = "300" height="200" controls autoplay> <source src = "/html5/foo.ogg" type="video/ogg" /> <source src = "/html5/foo.mp4" type="video/mp4" /> <track src = "subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src = "subtitles_ru.vtt" kind="subtitles" srclang="ru" label="Russia" default> Your browser does not support the video element. </video> </body> </html>
위 예제에서는 하나의 비디오에 영어와 러시아어 두 개의 자막 트랙을 추가했습니다. default 속성이 적용된 러시아어 자막이 기본적으로 표시되며, 사용자는 플레이어의 자막 메뉴에서 언어를 전환할 수 있습니다.