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

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

시도해보기
-----

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

특성
--

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

`default`

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

`kind`

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

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

`label`

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

`src`

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

`srclang`

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

사용 일람
-----

### 트랙 데이터 유형

`<track>` 요소가 미디어에 추가하는 데이터의 유형은 `subtitles`, `captions`, `descriptions`, `chapters`, `metadata` 중 하나의 값을 가지는 `kind` 특성으로 나타낼 수 있습니다. 사용자가 추가 데이터를 요청하는 경우, 브라우저는 `<track>` 요소가 가리키는 시간별 텍스트 데이터를 보여줍니다.

미디어 요소는 동일한 `kind`, `srclang`, `label`을 가진 `<track>`을 하나보다 많이 포함할 수 없습니다.

### Cue 변경 감지

`track` 속성으로 나타나는 기본 `TextTrack` (en-US)은 현재 제시된 큐가 변경될 때마다 `cuechange` 이벤트를 수신합니다. 이는 track이 미디어 요소와 연결되지 않은 경우에도 발생합니다.

`<track>` 요소가 `<audio>` (en-US) 또는 `<video>` 요소의 자식으로 미디어 요소와 연결되어 있는 경우, `cuechange` 이벤트는 마찬가지로 `HTMLTrackElement` (en-US)에 전달됩니다.


```js
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>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-track-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* WebVTT 텍스트 트랙 형식 (en-US)
* `HTMLMediaElement.textTracks` (en-US)