..

Search

<track>

HTML <track> 태그


정의 및 특징

<track> 태그는 <audio>나 <video> 요소와 같은 미디어 요소를 위한 텍스트 트랙(text track)을 정의할 때 사용합니다.

 

<track> 요소는 자막 파일이나 캡션 파일, 또는 미디어가 재생되는 동안 화면에 보일 텍스트를 포함한 파일 등을 명시하는데 사용됩니다.


예제
<video style="width:576px; height:360px" controls>
    <source src="sample_video_mp4.mp4" type="video/mp4">
    <source src="sample_video_ogg.ogg" type="video/ogg">
    <track src="sub_kr.vtt" kind="subtitles" srclang="ko" label="Korean">
    <track src="sub_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<track> 23.0 지원함 10.0 31.0 6.0 12.1

HTML5에서 변경된 사항

<track> 태그는 HTML5에서 새롭게 추가된 요소입니다.


사용할 수 있는 속성

속성명   속성값 설명

default

 

default

사용자 설정에서 다른 적절한 트랙을 명시하지 않았다면, 해당 텍스트 트랙이 활성화됨을 명시함.

kind

 

captions

chapters

descriptions

metadata

subtitles

텍스트 트랙의 종류를 명시함.

label

 

텍스트

텍스트 트랙의 제목을 명시함.

src

 

URL

텍스트 트랙 파일의 URL을 명시함.

srclang

 

언어 코드

텍스트 트랙 데이터의 언어를 명시함.

(단, kind 속성값이 “subtitles”인 경우에만 사용할 수 있음)


DOM 인터페이스

interface HTMLTrackElement : HTMLElement {

  attribute DOMString kind;

  attribute DOMString src;

  attribute DOMString srclang;

  attribute DOMString label;

  attribute boolean default;

 

  const unsigned short NONE = 0;

  const unsigned short LOADING = 1;

  const unsigned short LOADED = 2;

  const unsigned short ERROR = 3;

  readonly attribute unsigned short readyState;

 

  readonly attribute TextTrack track;

};


연관 페이지

HTML 오디오 수업 ⇒

HTML 비디오 수업 ⇒


연습문제