files/ko/web/html/element/track/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173

---
title: '<track>: 텍스트 트랙 삽입 요소'
slug: Web/HTML/Element/track
tags:
  - Accessibility
  - Element
  - HTML
  - HTML embedded content
  - HTML5
  - Multimedia
  - Reference
  - Web
  - 자막
translation_of: Web/HTML/Element/track
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML <code>&lt;track&gt;</code> 요소</strong>는 미디어 요소({{HTMLElement("audio")}}, {{HTMLElement("video")}})의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용합니다.</span> 트랙은 <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a>(Web Video Text Tracks, <code>.vtt</code> 파일) 또는 <a href="https://w3c.github.io/ttml2/index.html">Timed Text Markup Language(TTML)</a>형식을 사용해야 합니다.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div>

<p class="hidden">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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
   <td>없음</td>
  </tr>
  <tr>
   <th scope="row">가능한 콘텐츠</th>
   <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td>
  </tr>
  <tr>
   <th scope="row">태그 생략</th>
   <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td>
  </tr>
  <tr>
   <th scope="row">가능한 부모 요소</th>
   <td>미디어 요소. 다른 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a> 자식보다 앞에 위치해야 합니다.</td>
  </tr>
  <tr>
   <th scope="row">가능한 ARIA 역할</th>
   <td>없음</td>
  </tr>
  <tr>
   <th scope="row">DOM 인터페이스</th>
   <td>{{domxref("HTMLTrackElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="특성">특성</h2>

<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>

<dl>
 <dt>{{htmlattrdef("default")}}</dt>
 <dd>사용자 설정이 다른 자막을 가리키지 않는다면 활성화할 기본 트랙을 나타냅니다. 하나의 미디어 요소 당 하나의 <code>&lt;track&gt;</code> 요소에만 사용할 수 있습니다.</dd>
 <dt>{{htmlattrdef("kind")}}</dt>
 <dd>텍스트 트랙의 종류. 생략할 경우 <code>subtitles</code>로 간주합니다. 유효하지 않은 값을 가진 경우 <code>metadata</code>로 간주합니다. (Chrome 52 미만에서는 <code>subtitles</code>) 가능한 키워드는 다음과 같습니다.
 <ul>
  <li><code>subtitles</code>
   <ul>
    <li>자막은 시청자가 이해할 수 없는 언어에 대한 번역을 제공합니다. 예를 들면, 비영어권 시청자에게 영어 영상을 보여줄 때 제공할 대화문이나 텍스트 등입니다.</li>
    <li>자막은 배경 설명과 같은 추가 콘텐츠를 포함할 수 있습니다. 예를 들면, 스타워즈 영화 오프닝 텍스트, 혹은 현재 장면의 날짜와 시간, 장소 등입니다.</li>
   </ul>
  </li>
  <li><code>captions</code>
   <ul>
    <li>폐쇄자막은 오디오 트랜스크립션을 제공하며, 번역도 포함할 수 있습니다.</li>
    <li>음악 신호, 소리 효과와 같은 비언어적 소리 효과도 나타낼 수 있습니다. 효과의 원인(음악, 글자, 등장인물...)도 설명할 수 있습니다.</li>
    <li>음소거로 시청하는 경우와 청각 장애를 가진 시청자에게 적합합니다.</li>
   </ul>
  </li>
  <li><code>descriptions</code>
   <ul>
    <li>비디오 콘텐츠의 텍스트 설명입니다.</li>
    <li>비디오를 볼 수 없는 환경과 시각 장애를 가진 시청자에게 적합합니다.</li>
   </ul>
  </li>
  <li><code>chapters</code>
   <ul>
    <li>챕터 타이틀은 미디어 리소스를 탐색할 때 사용합니다.</li>
   </ul>
  </li>
  <li><code>metadata</code>
   <ul>
    <li>트랙을 스크립트가 사용합니다. 사용자에게 보이지 않습니다.</li>
   </ul>
  </li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("label")}}</dt>
 <dd>사용자가 읽을 수 있는 형태의 텍스트 트랙 제목. 브라우저에서 사용 가능한 트랙의 이름 목록을 생성할 때 사용합니다.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>자막의 주소(<code>.vtt</code> 파일). 유효한 {{glossary("URL")}}이어야 합니다. 필수 특성이며, <code>&lt;track&gt;</code>의 부모 {{htmlelement("audio")}}/{{htmlelement("video")}} 요소에 <code><a href="/ko/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> 특성이 없다면 문서와 같은 {{glossary("origin", "출처")}}여야 합니다.</dd>
 <dt>{{htmlattrdef("srclang")}}</dt>
 <dd>텍스트 트랙의 언어. 유효한 <a href="https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8">IETF 언어 태그</a>여야 합니다. <code>kind</code> 특성이 <code>subtitle</code>인 경우 필수 항목입니다.</dd>
</dl>

<h2 id="사용_일람">사용 일람</h2>

<h3 id="트랙_데이터_유형">트랙 데이터 유형</h3>

<p><code>&lt;track&gt;</code> 요소가 미디어에 추가하는 데이터의 유형은 <code>kind</code> 특성으로 나타낼 수 있습니다. 사용자가 추가 데이터를 요청하는 경우, 브라우저는 <code>&lt;track&gt;</code> 요소가 가리키는 시간별 텍스트 데이터를 보여줍니다.</p>

<p>미디어 요소는 동일한 <code>kind</code>, <code>srclang</code>, <code>label</code>을 가진 <code>&lt;track&gt;</code>을 하나보다 많이 포함할 수 없습니다.</p>

<div class="hidden">
<h3 id="Detecting_cue_changes">Detecting cue changes</h3>

<p>{{page("/en-US/docs/Web/API/TextTrack/cuechange_event", "On the track element")}}</p>
</div>

<h2 id="예제">예제</h2>

<pre class="brush: html">&lt;video controls poster="/images/sample.gif"&gt;
   &lt;source src="sample.mp4" type="video/mp4"&gt;
   &lt;source src="sample.ogv" type="video/ogv"&gt;
   &lt;track kind="captions" src="sampleCaptions.vtt" srclang="en"&gt;
   &lt;track kind="descriptions"
     src="sampleDescriptions.vtt" srclang="en"&gt;
   &lt;track kind="chapters" src="sampleChapters.vtt" srclang="en"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"&gt;
   &lt;track kind="metadata" src="keyStage1.vtt" srclang="en"
     label="Key Stage 1"&gt;
   &lt;track kind="metadata" src="keyStage2.vtt" srclang="en"
     label="Key Stage 2"&gt;
   &lt;track kind="metadata" src="keyStage3.vtt" srclang="en"
     label="Key Stage 3"&gt;
   &lt;!-- Fallback --&gt;
   ...
&lt;/video&gt;
</pre>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "semantics-embedded-content.html#the-track-element", "track element")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<p>{{Compat("html.elements.track")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><a href="/en-US/docs/HTML/WebVTT">WebVTT 텍스트 트랙 형식</a></li>
 <li>{{domxref("HTMLMediaElement.textTracks")}}</li>
</ul>