> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/html/undefined-12/untitled-4.md).

# 트랙(Track) 요소

## \<track>

비디오/오디오 재생 시, 자막을 표시하는 요소이다.&#x20;

## 속성&#x20;

* kind : subtitles 로 설정해 자막임을 표시한다.&#x20;
* src (필수 값) &#x20;
  * `.vtt` 확장자로 자막을 가져온다.&#x20;
  * ko / en / zh 등으로 언어를 설정한다.&#x20;
* srclang : 인코딩 언어 값을 지정한다. (필수 값)&#x20;
* label : 플레이어 하단에 표시될 언어의 이름을 입력한다.&#x20;
* default&#x20;
  * 기본적으로 보여지게 하고 싶은 언어가 있다면 해당 속성을 설정하면 된다.&#x20;
  * 속성을 설정하지 않을 경우, 자막 사용이 안된다.&#x20;
  * 자막 언어 고정 가능

{% hint style="info" %}
[.vtt 확장자란? ](https://how2open.com/extension/vtt)

웹 비디오 텍스트 트랙 (WebVTT) 형식으로 저장된 텍스트 데이터 파일. 자막, 설명, 장 및 메타 데이터와 같은 웹 비디오에 대한 정보를 포함한다. 동영상 데이터가 없다.
{% endhint %}

![여러 언어의 자막을 설정하면 이렇게 보여진다.  ](/files/-MRJDuMTlNSdUhhuh4fW)

## 예제&#x20;

```markup
<video src="videofile.mp4" poster="posterimage.jpg">
  <track
    kind="subtitles"
    src="videofile.ko.vtt"
    srclang="ko"
    label="한국어"
    default
  />
  <track kind="subtitles" src="videofile.en.vtt" srclang="en" label="English" />
</video>

<audio src="audiofile.mp3">
  <track kind="subtitles" src="audiofile.ko.vtt" srclang="ko" label="한국어" />
  <track kind="subtitles" src="audiofile.en.vtt" srclang="en" label="English" />
</audio>
```

```markup
  <!-- video + track -->

  <video src="./media/video/The temperature of dating.mp4" controls>
    <track src="./media/video/vtt/The temperature of dating.ko.vtt" srclang="ko" label="한국어" default />
    <track src="./media/video/vtt/The temperature of dating.en.vtt" srclang="en" label="영어" default />
    <track src="./media/video/vtt/The temperature of dating.ja.vtt" srclang="ja" label="일본어" default />
  </video>
```

## 참고&#x20;

* \<track> [트랙 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/track) → MDN
* [WebVTT 자막 파일](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API) → MDN
* [Track 엘리먼트 기초](https://www.html5rocks.com/ko/tutorials/track/basics/) → HTML5 Rocks