We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

Introduced in HTML5

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.

사용 문맥

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


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

이 속성은 만일 사용자의 설정이 다른 자막이 더 적절하다고 가리키지 않을경우 활성화될 자막을 가리킵니다. 이 속성은 하나의 미디어 요소에서 하나의 track 요소에만 사용됩니다.
텍스트 자막의 어떻게 사용될것인지 의미합니다. 생략될경우 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
    • 자막이 스크립트에 의해 사용됩니다. 사용자에게 보여지지 않습니다.
브라우저가 사용 가능한 자막 텍스트를 나열할떄 사용되는 사용자가 읽을수 있는 자막 텍스트의 제목들.
자막의 주소 (.vtt 파일). 이것은 유효한 URL이여야 합니다. 이 속성은 반드시 정의되어야 합니다.
자막 텍스트 데이터의 언어. 이것은 유효한 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">

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

기능 Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 23 31.0 (31.0) 10 12.10 6
기능 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 25 (see notes) 31.0 (31.0) No support No support No support

호환성 참고

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


같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: azunyan3
최종 변경: azunyan3,