[HTML5] Video Track 태그 사용하기(자막 파일 사용하기)

FrontEnd/HTML5 & CSS & JavaScript

푸고배 2020. 1. 31. 21:31

HTML5 <video> 태그에서 <track> 태그를 이용하여 자막 파일을 영상에 사용할 수 있다.

HTML5 <Track> 태그

<track> 태그는 media 요소 (<audio> 및 <video>)의 자막, 캡션 파일과 같은 시간별 텍스트가 포함된 파일을 지정하는데 사용된다.

트랙은 WebVTT(Web Video Text Tracks, .vtt 파일) 또는 TTML(Timed Text Markup Language) 형식을 사용해야 한다.

WebVTT

WEBVTT FILE

00:00:01.000 --> 00:00:02.500

Hello. This is frist Subtitle.

00:00:02.500 --> 00:00:03.000

It is very easy to use.

0 : 헤더, 필수 요소는 아니다.

00:00:01.000 --> 00:00:02.500 : 시간으로 -->를 기준으로 왼쪽은 텍스트의 시작 시간, 오른쪽은 끝나는 시간이ㅏㄷ.

Hello. This is frist Subtitle. : 표시할 텍스트이다.

공백을 통해서 각 Cue를 구분한다.

Browser 지원 버전

HTML5 <Track> Attributes

Attribute	Value	Description
default	default	track이 여러개 존재할 때 현재 track을 기본값으로 설정
kind	captions chapters descriptions metadata subtitles	track의 종류 captions : 비언어적 소리 효과도 표현 가능한 track, 음소거로 시청하는 경우와 시각 장애를 가진 시청자에게 적합 chapters: 미디어 리소스 탐색 시 사용 description : 비디오 콘텐츠의 텍스트 설명, 음소거로 시청하는 경우와 시각 장애를 가진 시청자에게 적합 metadata : 스크립트가 사용하는 track, 사용자에게 보이지 않음 subtitles : 자막 파일
label	text	track의 타이틀 설정 (사진에서 Korean에 해당, 반드시 언어 정보를 담을 필요 없고 자막을 구별할 수 있는 텍스트이면 된다.)
src	URL	track의 주소
srclang	language_code	track의 언어설정

HTML5 <Track> Example

근데 Jsfaddle에서는 왜 자막이 안나오지..

서버에 올리면 자막이 실행되는 것을 확인 할 수 있다.

참고 사이트 :