트랙(Track) 요소

<track>

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

속성

• kind : subtitles 로 설정해 자막임을 표시한다.

• src (필수 값)

  • .vtt 확장자로 자막을 가져온다.

  • ko / en / zh 등으로 언어를 설정한다.

• srclang : 인코딩 언어 값을 지정한다. (필수 값)

• label : 플레이어 하단에 표시될 언어의 이름을 입력한다.

• default

  • 기본적으로 보여지게 하고 싶은 언어가 있다면 해당 속성을 설정하면 된다.

  • 속성을 설정하지 않을 경우, 자막 사용이 안된다.

  • 자막 언어 고정 가능

.vtt 확장자란?

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

여러 언어의 자막을 설정하면 이렇게 보여진다.

예제

<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>

  <!-- 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>

참고

• <track> 트랙 요소 → MDN

• WebVTT 자막 파일 → MDN

• Track 엘리먼트 기초 → HTML5 Rocks