[Html] track 태그 사용법 (video에 자막 연결하기)

최근에는 영상에 자막을 넣는 것이 거의 필수가 되었습니다. 자막이 청각장애인들이 영상을 볼 수 있도록 해줄뿐더러 주변 소음이나 소리를 들을 수 없는 상황에서 영상의 내용을 이해하는데 도움이 되기 때문입니다. HTML5에서는 track 태그를 활용하여 영상에 자막을 연결해 줄 수 있습니다. 이번 포스팅에서는 track 태그를 활용하여 영상에 자막을 넣는 방법에 대해 알아보도록 하겠습니다.

 

 track 태그 사용법 

<track kind="자막종류" src="자막경로" srclang="언어" label="제목" default>

 

kind 속성 (자막 종류)

속성 값	설명
subtitles	자막을 의미합니다. 소리를 켤 수 있지만 이해할 수 없는 경우, 다른 언어로 번역한 자막일 경우에 사용하며 비디오 영상에 표시됩니다.
captions	캡션을 의미합니다. 청각장애인용 자막이거나 소리를 들을 수 없거나 켤 수 없는 경우에 사용하며 비디오 화면에 됩니다.
descriptions	비디오 콘텐츠에 대한 설명을 의미하며 비디오 화면에는 표시되지 않습니다.
chapters	비디오 탐색을 위한 제목을 의미하며 비디오 화면에는 표시되지 않습니다.
metadata	비디오 콘텐츠 정보입니다. 비디오 화면에는 표시되지 않습니다.

 

그 밖의 속성들

• src : 자막의 경로를 지정해주는 속성입니다.
• srclang : 사용할 언어를 지정합니다. kind 속성이 subtitle이라면 반드시 지정해야 하는데 en이나 ko처럼 언어를 나타내는 약자로 표기합니다.
• label : 자막이 여러개일 경우, 자막을 식별할 수 있도록 제목을 달아줍니다.
• default : 자막이 여러개일 경우, 기본으로 사용할 자막을 지정해 줍니다.

 

 track 태그 사용 예제 

비디오 파일 삽입

[Html] video 태그 사용법 & 예제 총정리

[Html] video 태그 사용법 & 예제 총정리

1. 자막을 연결하기 위해서는 먼저 영상이 있어야 합니다. 웹 문서에 영상을 넣기 위해서는 video 태그를 활용합니다. video 태그 사용법은 위 URL을 참고해주세요.

 

.vtt 자막 파일 준비

WEBVTT FILE

1
00:00:03.500 --> 00:00:05.000 D:vertical A:start
Everyone wants the most from life

2
00:00:06.000 --> 00:00:09.000 A:start
Like internet experiences that are rich <b>and</b> entertaining

3
00:00:11.000 --> 00:00:14.000 A:end
Phone conversations where people truly <c.highlight>connect</c>

4
00:00:14.500 --> 00:00:18.000
Your favourite TV programmes ready to watch at the touch of a button

5
00:00:19.000 --> 00:00:24.000
Which is why we are bringing TV, internet and phone together in <c.highlight>one</c> super package

6
00:00:24.500 --> 00:00:26.000
<c.highlight>One</c> simple way to get everything

7
00:00:26.500 --> 00:00:27.500 L:12%
UPC

8
00:00:28.000 --> 00:00:30.000 L:75%
Simply for <u>everyone</u>

upc-video-subtitles-en.vtt

0.00MB

2. 영상을 업로드하기 위해서는 자막을 넣을 파일이 필요합니다. 자막 파일은 smi와 srt, vtt이 대표적인데 vtt파일이 모든 브라우저에서 공식적으로 지원하는 확장자이므로 왠만하면 .vtt 파일을 사용하도록 합시다. 위는 .vtt 샘플(sample) 파일입니다. 이러한 자막은 시간대별로 일일이 입력해줘야 합니다. 하지만 이렇게 하나하나 싱크를 맞추기에는 매우 고단한 작업이죠. 아래 링크되어있는 사이트를 활용하면 영상의 싱크를 쉽게 맞출 수 있으니 참고해주시기 바랍니다.

http://caption.devco.kr/

 

※ .vtt 파일이란?
VTT 파일은 WebVTT(Web Video Text Tracks) 형식으로 HTML5 요소와 관련하여 시간이 지정된 텍스트를 표시하기 위한 W3C(World Wide Web Consorium) 표준입니다. VTT 파일의 형식은 SRT 파일과 다소 유사하며 VTT 파일에는 자막, 설명, 캡션, 설명, 장 및 메타데이터와 같은 정보가 포함되어 있습니다. 우리는 이런 .vtt 파일을 사용하여 시간이 지정된 텍스트 자막 또는 캡션을 표시할 수 있습니다. WebVTT 기반 텍스트 파일은 UTF-8을 사용하여 인코딩 됩니다. VTT 파일은 일반 텍스트 파일이므로 Microsoft의 메모장과 같은 텍스트 편집기를 사용하여 열 수 있습니다.

 

track 태그 사용 예시

<video id="vTest" class="playr_video" controls="" preload="metadata">
    <source src="v/upc-tobymanley.theora.ogg" type="video/ogg">
    <source src="v/upc-tobymanley.mp4" type="video/mp4">
    <track label="English subtitles" kind="subtitles" srclang="en" src="upc-video-subtitles-en.vtt" default="">
</video>

 

3. track 태그를 활용하여 자막 파일을 영상과 연결시켜줍니다.

 

결과 확인

https://www.iandevlin.com/html5test/webvtt/html5-video-webvtt-sample.html

HTML5 Video WebVTT Example