<track>

HTML <track> 요소는 미디어 요소(<audio>,<video>)의 자식으로 사용됩니다. It lets you specify timed text tracks (or time-based data), for example to automaticaly handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks.

컨텐츠 범주 없음
허용된 컨텐츠 없음, 이것은 empty element.
태그 생략 이것은 빈 요소 이기 떄문에, 시작 태그는 있어야 하며, 종료 태그는 없어야 합니다.
허용된 부모 요소 A media element, before any flow content.
표준 문서 HTML5, section 4.8.9

속성

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

default
이 속성은 만일 사용자의 설정이 다른 자막이 더 적절하다고 가리키지 않을경우 활성화될 자막을 가리킵니다. 이 속성은 하나의 미디어 요소에서 하나의 track 요소에만 사용됩니다.
kind
텍스트 자막의 어떻게 사용될것인지 의미합니다. 생략될경우 subtitles이 기본값입니다. 다음 키워드들이 값으로 사용될수 있습니다.
  • subtitles
    • Subtitles provide translation of content that cannot be understood by the viewer. For example dialogue or text that is not English in an English language film.
    • Subtitles may contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene.
  • captions
    • Closed captions provide a transcription and possibly a translation of audio.
    • It may include important non-verbal information such as music cues or sound effects. It may indicate the cue's source (e.g. music, text, character).
    • Suitable for users who are deaf or when the sound is muted.
  • descriptions
    • 비디오 컨텐츠의 텍스트 설명
    • 시각장애인이나, 동영상이 보여질수 없을떄 적절함
  • chapters
    • Chapter titles are intended to be used when the user is navigating the media resource.
  • metadata
    • 자막이 스크립트에 의해 사용됩니다. 사용자에게 보여지지 않습니다.
label
브라우저가 사용 가능한 자막 텍스트를 나열할떄 사용되는 사용자가 읽을수 있는 자막 텍스트의 제목들.
src
자막의 주소 (.vtt 파일). 이것은 유효한 URL이여야 합니다. 이 속성은 반드시 정의되어야 합니다.
srclang
자막 텍스트 데이터의 언어. 이것은 유효한 BCP 47 언어 태그여야 합니다. 만일 kind 속성이 subtitles로 설정되었을 경우, srclang 속성은 반드시 정의되어야합니다.

DOM 인터페이스

이 요소는 HTMLTrackElement 인터페이스를 구현합니다.

예제

<video controls>
   <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">
</video>

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
trackChrome Full support 23Edge Full support YesFirefox 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 Yes
cuechange eventChrome Full support YesEdge ? Firefox Full support 68IE No support NoOpera ? Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 68Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
defaultChrome Full support 23Edge Full support YesFirefox 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 Yes
kindChrome Full support 23Edge Full support YesFirefox 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 Yes
labelChrome Full support 23Edge Full support YesFirefox 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 Yes
srcChrome Full support 23Edge Full support YesFirefox 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 Yes
srclangChrome Full support 23Edge Full support YesFirefox 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 Yes

Legend

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

호환성 참고

Android의 Chrome에서, 전체화면 비디오에서 <track> 요소가 작동하지 않습니다.

명세

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

같이 보기