<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 source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

속성

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

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> 요소가 작동하지 않습니다.

명세

같이 보기

• WebVTT text track format