<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.

The type of data that track adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata. The element points to a source file containing timed text that the browser exposes when the user requests additional data.

A media element cannot have more than one track with the same kind, srclang, and label.

사용 문맥

속성

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

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>

브라우저 호환성

호환성 참고

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

사양

• https://www.w3.org/TR/html5/embedded-content-0.html#the-track-element

같이 보기

• WebVTT text track format