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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

시도해보기

콘텐츠 카테고리 없음
가능한 콘텐츠 없음. 빈 요소입니다.
태그 생략 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.
가능한 부모 요소 미디어 요소, <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은 반드시 정의되어야 합니다.

사용 일람

트랙 데이터 유형

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

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

Cue 변경 감지

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

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

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
# the-track-element

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
track
default
kind
kind='descriptions'
label
src
srclang

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Has more compatibility info.

같이 보기