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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

HTML<track> 요소는 미디어 요소(<audio>,<video>)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용합니다. 트랙은WebVTT(Web Video Text Tracks,.vtt 파일) 형식을 사용해야 합니다.

시도해 보기

<video controls src="/shared-assets/videos/friday.mp4">  <track    default    kind="captions"    srclang="en"    src="/shared-assets/misc/friday.vtt" />  Download the  <a href="/shared-assets/videos/friday.mp4">MP4</a>  video, and  <a href="/shared-assets/misc/friday.vtt">subtitles</a>.</video>

video {  width: 250px;}video::cue {  font-size: 1rem;}

콘텐츠 카테고리	없음
가능한 콘텐츠	없음.빈 요소입니다.
태그 생략	여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.
가능한 부모 요소	미디어 요소,`<audio>` 또는`<video>`.
포함되는 ARIA 역할	해당되는 역할 없음
가능한 ARIA 역할	없음
DOM 인터페이스	`HTMLTrackElement`

특성

이 요소는전역 특성을 포함합니다.

default

사용자 설정이 다른 자막을 가리키지 않는다면 활성화할 기본 트랙을 나타냅니다. 하나의 미디어 요소 당 하나의<track> 요소에만 사용할 수 있습니다.

kind

텍스트 트랙의 종류. 생략할 경우subtitles로 간주합니다. 유효하지 않은 값을 가진 경우metadata로 간주합니다 (Chrome 52 미만에서는subtitles). 가능한 키워드는 다음과 같습니다.

subtitles
- 자막은 시청자가 이해할 수 없는 언어에 대한 번역을 제공합니다. 예를 들면, 비영어권 시청자에게 영어 영상을 보여줄 때 제공할 대화문이나 텍스트 등입니다.
- 자막은 배경 설명과 같은 추가 콘텐츠를 포함할 수 있습니다. 예를 들면, 스타워즈 영화 오프닝 텍스트, 혹은 현재 장면의 날짜와 시간, 장소 등입니다.
captions
- 폐쇄자막은 오디오 트랜스크립션을 제공하며, 번역도 포함할 수 있습니다.
- 음악 신호, 소리 효과와 같은 비언어적 소리 효과도 나타낼 수 있습니다. 효과의 원인(음악, 글자, 등장인물...)도 설명할 수 있습니다.
- 음소거로 시청하는 경우와 청각 장애를 가진 시청자에게 적합합니다.
descriptions
- 비디오 콘텐츠의 텍스트 설명입니다.
- 비디오를 볼 수 없는 환경과 시각 장애를 가진 시청자에게 적합합니다.
chapters
- 챕터 타이틀은 미디어 리소스를 탐색할 때 사용합니다.
metadata
- 트랙을 스크립트가 사용합니다. 사용자에게 보이지 않습니다.

label

사용자가 읽을 수 있는 형태의 텍스트 트랙 제목. 브라우저에서 사용 가능한 트랙의 이름 목록을 생성할 때 사용합니다.

src

자막의 주소(.vtt 파일). 유효한URL이어야 합니다. 필수 특성이며,<track>의 부모<audio>/<video> 요소에crossorigin 특성이 없다면 문서와 같은출처여야 합니다.

srclang

텍스트 트랙의 언어. 유효한IETF 언어 태그여야 합니다.kind 특성이subtitle인 경우,srclang은 반드시 정의되어야 합니다.

let textTrackElem = document.getElementById("texttrack");textTrackElem.addEventListener("cuechange", (event) => {  let cues = event.target.track.activeCues;});

예제

html

<video controls poster="/images/sample.gif">  <source src="sample.mp4" type="video/mp4" />  <source src="sample.ogv" type="video/ogv" />  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en" />  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />  <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de" />  <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />  <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja" />  <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz" />  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />  <!-- Fallback -->  ...</video>