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

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

콘텐츠 카테고리 없음
가능한 콘텐츠 없음. 빈 요소입니다.
태그 생략 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.
가능한 부모 요소 미디어 요소. 다른 플로우 콘텐츠 자식보다 앞에 위치해야 합니다.
가능한 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인 경우 필수 항목입니다.

사용 일람

트랙 데이터 유형

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

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

예제

<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 Status Comment
HTML Living Standard
The definition of 'track element' in that specification.
Living Standard
HTML5
The definition of 'track element' in that specification.
Recommendation Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
trackChrome Full support 23Edge Full support 12Firefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Doesn't work for fullscreen video.
Chrome Android Full support 25
Notes
Full support 25
Notes
Notes Doesn't work for fullscreen video.
Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Full support 6Samsung Internet Android Full support 1.5
Notes
Full support 1.5
Notes
Notes Doesn't work for fullscreen video.
defaultChrome Full support 23Edge Full support 12Firefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.5
kindChrome Full support 23Edge Full support 12Firefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.5
labelChrome Full support 23Edge Full support 12Firefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.5
srcChrome Full support 23Edge Full support 12Firefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.5
srclangChrome Full support 23Edge Full support 12Firefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.5

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

같이 보기