HTML에서 동영상 자막 등 텍스트 트랙에 제목을 지정하려면 <track> 요소의 label 속성을 사용하면 됩니다. label 속성은 사용자가 플레이어 메뉴에서 자막 트랙을 선택할 때 화면에 표시되는 이름을 정의하는 역할을 합니다.
label 속성이란?
label 속성은 해당 텍스트 트랙이 어떤 언어나 용도를 가지고 있는지 사용자에게 알려주는 읽기 전용 문자열입니다. 예를 들어 영어 자막에는 "English", 한국어 자막에는 "한국어"처럼 사람이 알아보기 쉬운 제목을 붙일 수 있습니다.
참고로 kind="subtitles"로 지정된 트랙에는 반드시 srclang 속성과 함께 유효한 BCP 47 언어 태그를 지정해야 하며, label은 이 언어 정보를 사람이 읽기 좋은 형태로 보여주는 보조 수단입니다.
예제 코드
아래 코드는 두 개의 자막 트랙에 각각 label 속성으로 제목을 지정한 예제입니다. 직접 실행해 보면서 label 속성이 어떻게 적용되는지 확인해 보세요.
<!DOCTYPE HTML> <html> <body> <video width = "450" height = "300" 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> 사용 중인 브라우저에서는 video 요소를 지원하지 않습니다. </video> </body> </html>
코드 설명
- <video>: 동영상 플레이어를 생성하며, width와 height로 크기를 지정하고 controls 속성으로 재생 컨트롤을 표시합니다.
- <source>: 브라우저 호환성을 위해 ogg와 mp4 두 가지 형식의 비디오 소스를 제공합니다.
- <track>: WebVTT(.vtt) 형식의 자막 파일을 연결합니다. 첫 번째 트랙은 label이 "English", 두 번째 트랙은 "Russia"로 지정되어 있으며, 두 번째 트랙에는 default 속성이 있어 기본 자막으로 표시됩니다.
이렇게 label 속성을 활용하면 여러 개의 자막 트랙이 있을 때도 사용자가 원하는 언어의 자막을 쉽게 구분하고 선택할 수 있습니다.