HTML5 동영상에 VTT 자막 트랙을 넣는 방법

영상은 재생되는데 자막이 없다면 파일을 못 읽는 문제와 표시 시간이 맞지 않는 문제부터 구분하세요.

트랙 연결하기

영상과 UTF-8 VTT를 같은 사이트에 두고 video 안에 track을 추가합니다. 상대 경로는 웹페이지를 기준으로 합니다. srclang은 음성이 아니라 자막의 언어입니다. 영어 강의의 한국어 자막이라면 ko를 쓰세요.

<video controls src="lesson.mp4">
  <track kind="subtitles" src="example-en.vtt"
         srclang="en" label="English" default>
</video>

자막 트랙 하나로 먼저 테스트하기

데모 영상과 VTT를 내려받아 테스트 서버의 HTML과 같은 폴더에 둡니다. 예제 코드대로라면 파일명은 lesson.mp4와 example-en.vtt입니다. 로컬 파일 접근 제한이 영향을 주지 않도록 웹 주소로 페이지를 여세요.

예제에는 워크숍 안내 문장만 있습니다. 처음에 자막이 없어도 정상입니다. 8초에서 멈춰 문구를 대조하고 13초에는 사라졌는지 확인하세요. 트랙을 꺼도 남아 있으면 다른 트랙이나 영상에 입혀진 자막을 확인하세요.

자막 메뉴가 비면 네트워크 요청 확인하기

개발자 도구의 네트워크 탭을 열고 새로 고친 뒤 영어를 선택하세요. .vtt 요청이 없으면 게시된 video 요소를 확인하세요. 편집기가 저장하면서 track 요소를 지웠을 수 있습니다. 요청이 있으면 전체 주소와 실제 업로드 폴더를 비교하세요.

응답 본문에 WEBVTT, 빈 줄, 시간 코드가 있는지 보세요. 로그인 화면도 200을 반환할 수 있습니다. CORS 오류라면 파일을 페이지와 같은 출처에서 먼저 테스트하고 미디어 서버의 허용 출처와 crossorigin 속성을 확인하세요.

시간 차이로 편집 지점 찾기

귀로 구별하기 쉬운 세 문장의 시작 시각과 자막 시작을 대조하세요. 차이가 일정하면 새 도입부를, 세 번째만 늦으면 두 번째와 세 번째 사이의 편집점을 확인하세요. 차이가 커진다면 재생 중인 영상 버전부터 확인하세요.

게시 페이지에서 언어를 하나씩 선택해 문장을 확인한 뒤 자막을 끄세요. 글자가 남아 있으면 원본 영상과 대조합니다. 문제를 전달할 때 영상 파일명, 선택한 트랙, 재생 시각을 함께 적으세요.

작업 예시

EasySub가 작성한 대본의 영어 합성 음성입니다. 원본 SRT의 세 번째 자막을 VTT 예시로 옮겼으며 새로 내보낸 파일이나 전문가의 수동 감수본은 아닙니다.

WEBVTT

3
00:00:07.950 --> 00:00:12.149
Our next workshop starts on June 15 at 9:30.

WebVTT · EN · 데모 영상 다운로드 · 원문 SRT(영어)

시작과 끝 확인하기

예시에서 English를 선택하고 8초로 이동하면 문장이 보이고, 13초에는 사라져야 합니다. VTT 주소를 직접 열어 보세요. 상태가 200이어도 로그인 화면이 나오면 자막이 아닙니다. text/vtt와 다른 도메인 사용 시 crossorigin 및 서버의 CORS 응답을 확인하세요.