HTML <track>: 텍스트 트랙 삽입 요소

HTML <track> 요소는 <audio>와 <video>와 같은 미디어 요소의 자식으로 사용해서, 자막 등의 시간 기반 텍스트 트랙을 지정할 때 사용합니다.

특성

전역 특성을 포함합니다.

default

별도의 사용자 설정이 없다면 이 트랙을 기본으로 활성화할 것을 지정합니다. 미디어 요소당 하나의 <track> 요소에만 사용할 수 있는 특성입니다.

kind

텍스트 트랙의 용도를 나타냅니다. 지정하지 않았을 때의 기본값은 subtitles고, 유효하지 않은 값을 지정했을 때의 기본값은 metadata입니다. 다음의 키워드를 사용할 수 있습니다.

subtitles

자막입니다. 자막은 사용자가 이해할 수 없는 언어로 이루어진 콘텐츠의 번역을 제공합니다. 그 외에도 추가 정보를 포함할 수 있는데, 장면의 시간, 장소, 날짜 등 배경 정보를 자막이 포함하는 경우가 많습니다.

caption

폐쇄 캡션입니다. 녹취록과 그 번역을 제공합니다. 그 외에도 중요한 음악이나 소리 효과 등이 들린다는 것을 알려줄 수 있습니다. 음소거 상태의 미디어 또는 청각장애인 대상 미디어에 적합합니다.

descriptions

비디오 콘텐츠의 설명입니다. 시각장애인 대상 영상 또는 영상을 시청할 수 없는 환경에 적합합니다.

chapters

챕터는 사용자가 미디어 리소스를 탐색할 때 중요 지점을 보여줄 수 있습니다.

metadata

스크립트가 사용하는 트랙입니다. 사용자에게 보이지 않습니다.

하나의 미디어 요소는 kind, srclang, label이 모두 동일한 <track>을 두 개 이상 포함할 수 없습니다.

label

사용 가능한 트랙 목록을 보여줄 때 이 트랙의 이름으로 사용할 값을 지정합니다.

src

삽입할 트랙(.vtt 파일)의 URL입니다. 필수 특성입니다. 이 <track>의 부모 <audio> 또는 <video> 요소에 crossorigin 특성이 존재하지 않는다면 src 특성에 사용할 URL의 출처는 현재 문서의 출처와 동일해야 합니다.

srclang

텍스트 트랙의 언어를 지정합니다. 전역 lang 특성과 같은 값을 사용합니다. kind 특성이 subtitles인 경우에는 필수 특성입니다.

예제

<video controls poster="/images/sample.gif">
  <!-- 비디오 소스 -->
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <!-- 트랙 -->
  <track kind="captions" src="captions.vtt" srclang="ko" />
  <track kind="descriptions" src="descriptions.vtt" srclang="ko" />
  <track kind="chapters" src="chapters.vtt" srclang="ko" />
  <!-- 한글/영어 자막 -->
  <track kind="subtitles" src="subtitles_ko.vtt" srclang="ko" />
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" />
  <!-- 메타데이터 트랙 -->
  <track kind="metadata" src="keyStage1.vtt" srclang="ko" label="키 스테이지 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="ko" label="키 스테이지 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="ko" label="키 스테이지 3" />
</video>

명세

HTML Living Standard

브라우저 호환성

같이 보기

• 오디오: <audio>
• 비디오: <video>