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>
지원하는 브라우저 및 버전
| 태그명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| <track> | 23.0 | 지원함 | 10.0 | 31.0 | 6.0 | 12.1 |
HTML5에서 변경된 사항
<track> 태그는 HTML5에서 새롭게 추가된 요소입니다.
사용할 수 있는 속성
| 속성명 | 속성값 | 설명 | |
|---|---|---|---|
|
default |
사용자 설정에서 다른 적절한 트랙을 명시하지 않았다면, 해당 텍스트 트랙이 활성화됨을 명시함. |
||
|
captions chapters descriptions metadata subtitles |
텍스트 트랙의 종류를 명시함. |
||
|
텍스트 |
텍스트 트랙의 제목을 명시함. |
||
|
URL |
텍스트 트랙 파일의 URL을 명시함. |
||
|
|
언어 코드 |
텍스트 트랙 데이터의 언어를 명시함. (단, 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; }; |
