HTML kind 속성이란?
HTML에서 텍스트 트랙의 종류를 지정하려면 <track> 요소에 kind 속성을 사용합니다. 이 속성을 활용하면 동영상에 추가되는 텍스트 파일이 어떤 용도인지 브라우저에 알려줄 수 있습니다. 예를 들어, 자막 파일을 연결할 때는 kind 값을 subtitles로 설정하면 됩니다.
kind 속성에 사용할 수 있는 값
- subtitles – 자막 (기본값): 대화 내용을 다른 언어로 번역해 보여줍니다.
- captions – 자막(청각 지원용): 음향 효과나 화자 정보까지 포함하여 청각 장애가 있는 사용자를 돕습니다.
- descriptions – 설명: 영상 장면을 텍스트로 묘사하여 시각 장애가 있는 사용자를 지원합니다.
- chapters – 챕터: 동영상의 챕터 제목을 정의하여 탐색에 활용할 수 있습니다.
- metadata – 메타데이터: 화면에는 표시되지 않으며, 스크립트 등에서 활용하는 정보입니다.
kind 속성 예제 코드
아래 코드는 kind 속성을 실제로 구현한 예제입니다. 영어와 러시아어 자막 트랙 두 개를 동영상에 연결하고 있습니다.
<!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>
코드 설명
- src – 텍스트 트랙으로 사용할 WebVTT(.vtt) 자막 파일의 경로를 지정합니다.
- srclang – 자막의 언어 코드를 나타냅니다(예: en은 영어, ru는 러시아어). kind 값이 subtitles 또는 captions일 때는 반드시 지정해야 합니다.
- label – 플레이어의 자막 선택 메뉴에 표시될 트랙의 이름입니다.
- default – 여러 트랙 중 기본으로 활성화할 트랙을 지정합니다. 위 예제에서는 러시아어 자막이 기본값으로 설정되어 있습니다.
이처럼 kind 속성을 적절히 활용하면 다국어 자막, 접근성 지원 캡션, 챕터 정보 등을 손쉽게 구현할 수 있어 웹 접근성과 사용자 경험을 모두 향상시킬 수 있습니다.