UltKit

SRT VTT 변환

브라우저는 <track> 요소의 자막을 WebVTT로만 재생하므로, VLC에서 잘 나오던 SRT 파일도 웹 페이지에서는 아무것도 표시되지 않습니다. 여기서 SRT를 VTT로 변환하면 같은 자막이 모든 HTML5 플레이어에 나타납니다.

자막 변환

또는 SRT, VTT, ASS … 파일을 여기에 끌어다 놓으세요 ·

파일당 최대 95 MB· 최대 20개 파일· 30분 뒤 삭제

출력

파일은 UltKit 서버에서 처리되며 30분 뒤 삭제됩니다.

사용 방법

  1. 1

    .srt 파일 올리기

    자막 파일 하나 또는 언어별로 하나씩, 파일당 95 MB까지 최대 20개를 추가하십시오. 예전 인코딩은 자동으로 감지해 WebVTT가 요구하는 UTF-8로 다시 저장합니다.

  2. 2

    필요하면 싱크 조정

    단순 변환이라면 아무것도 바꾸지 않아도 됩니다. 동영상에서 자막이 빠르거나 늦게 나온다면 고급 설정의 싱크 이동에 초 단위 값을 입력하십시오.

  3. 3

    WebVTT로 변환

    WebVTT (VTT)로 변환을 누르고 .vtt 파일을 내려받으십시오. 동영상 옆에 업로드하면 됩니다. 서버에 있는 사본은 30분 뒤 삭제됩니다.

SRT를 업로드하고 WebVTT (VTT)로 변환을 누르십시오. 필수 WEBVTT 헤더, 마침표로 구분된 밀리초, UTF-8 텍스트를 갖춘 파일이 만들어지며 <track> 요소, Video.js, Plyr, 강의 플랫폼에 바로 쓸 수 있습니다.

웹 플레이어에 SRT 대신 VTT가 필요한 이유

SRT는 2000년 무렵 DVD 리핑 문화에서 나와 데스크톱 플레이어, 자막 편집기, 다운로드 파일의 기본 형식이 되었습니다. WebVTT는 2010년에 SRT 문법을 바탕으로 웹용으로 설계되었고, HTML 표준은 이를 <track> 요소의 형식으로 정했습니다. Chrome, Firefox, Safari, Edge 모두 WebVTT를 기본으로 읽지만, track으로 SRT를 읽는 브라우저는 하나도 없습니다.

두 형식은 텍스트 편집기에서 거의 똑같아 보이기 때문에 차이를 놓치기 쉽습니다. VTT 파일은 반드시 WEBVTT로 시작하고 UTF-8이어야 하며, SRT가 00:01:05,300으로 쓰는 시간을 00:01:05.300으로 씁니다. 게다가 VTT에는 SRT에 없던 위치, 스타일, 주석을 담을 수 있습니다. 그래서 SRT를 VTT로 변환할 때는 잃는 것이 없지만, 반대로 VTT SRT 변환을 거치면 이런 추가 정보가 사라집니다.

.vtt 파일이 준비되면 아래처럼 페이지에 연결하십시오. iPhone에서 찍은 .mov처럼 브라우저가 재생하지 못하는 형식의 동영상이라면 MOV를 MP4로 변환하는 방법 가이드에서 나머지 작업을 다룹니다.

변환한 영어 자막을 넣은 동영상 HTML
<video controls src="lecture.mp4">
  <track kind="subtitles" src="lecture.en.vtt"
         srclang="en" label="영어" default>
</video>

SRT와 VTT 차이: 알아야 할 모든 것

두 형식으로 쓴 같은 큐
항목SRTWebVTT
파일 첫 줄큐 번호 `1``WEBVTT`
타임스탬프`00:01:05,300``00:01:05.300` (시간 단위 생략 가능)
큐 번호필수선택 사항인 식별자
텍스트 인코딩제한 없음, 예전 코드 페이지가 많음UTF-8만 허용
위치와 정렬표준 없음`line`, `align` 같은 큐 설정
스타일`<i>`, `<b>`, `<u>`, `<font>``<i>`, `<b>`, `<u>`, CSS로 꾸미는 클래스
서버의 MIME 유형`application/x-subrip``text/vtt`

SRT

SubRip 자막(SRT)

SRT는 2000년 무렵 동영상에서 자막을 추출하던 무료 Windows 프로그램 SubRip의 자막 형식입니다. 각 항목은 번호, 시작·종료 시간, 자막 텍스트로 이루어진 일반 텍스트 블록입니다. VLC, YouTube, Facebook, 동영상 편집기, 스마트 TV가 모두 받는, 가장 폭넓게 지원되는 자막 형식입니다. SRT는 기본적인 서식만 지원하며 위치 지정이나 스타일에 관한 표준이 없습니다.

압축 방식
–
투명도
–
애니메이션
–
도입 연도
SubRip
SRT 변환

VTT

WebVTT 자막

VTT는 2010년 무렵 WHATWG와 W3C가 HTML5 동영상용으로 개발한 Web Video Text Tracks 형식입니다. SRT와 비슷해 보이지만 WEBVTT 헤더가 붙고 위치 지정, 스타일, 화자 표시, 메타데이터를 지원합니다. 브라우저는 <track> 요소를 통해 자막에 사용하며, 스트리밍 플랫폼과 YouTube도 받습니다. 일부 데스크톱 플레이어와 편집기는 SRT를 요구합니다.

압축 방식
–
투명도
–
애니메이션
–
도입 연도
2010 · W3C / WHATWG
VTT 변환

HTML5 동영상은 track 요소로 WebVTT만 불러오므로, 데스크톱 플레이어용으로 만든 SRT 자막을 웹 페이지에 표시하려면 먼저 VTT로 바꿔야 합니다.

브라우저에서 VTT 자막이 보이지 않을 때

  • 온라인에서는 자막이 나오지만 내 컴퓨터의 HTML 파일을 열면 나오지 않음

    브라우저는 file:// 페이지에서 불러오는 트랙을 차단합니다. 로컬 웹 서버나 실제 사이트에서 확인하십시오.

  • 다른 도메인에서 불러온 트랙이 비어 있음

    <video> 요소에 crossorigin을 추가하고, .vtt가 있는 서버의 CORS 헤더에서 내 사이트를 허용하십시오.

  • 서버가 파일을 text/plain으로 보냄

    .vtt를 text/vtt로 보내도록 서버를 설정하십시오. 다른 유형을 거부하는 플레이어가 있습니다.

  • 모든 자막이 1초씩 일찍 나옴

    싱크 이동에 1 같은 양수 값을 넣어 다시 변환하고 파일을 교체하십시오.

SRT VTT 변환 자주 묻는 질문

변환하면 파일에서 무엇이 바뀝니까?

맨 위에 WEBVTT 줄을 추가하고, 밀리초 앞의 쉼표를 마침표로 바꾸고, 파일을 UTF-8로 저장합니다. WebVTT에서 큐 번호는 선택 사항인 식별자로 허용되며, 자막 텍스트 자체는 바뀌지 않습니다.

.srt 확장자를 .vtt로 바꾸기만 하면 안 됩니까?

안 됩니다. WEBVTT 헤더가 없고 타임스탬프에 쉼표가 있으면 브라우저가 트랙을 거부하거나 모든 큐를 건너뜁니다. 파일 내용을 다시 써야 하며, 여기서는 1초면 끝납니다.

기울임꼴과 굵은 글씨는 유지됩니까?

유지됩니다. <i>, <b>, <u>는 두 형식 모두에 있습니다. SRT의 <font color> 태그는 WebVTT에 직접 대응하는 태그가 없습니다. WebVTT는 CSS 클래스로 큐에 색을 입히기 때문입니다. 파일에 이 태그가 많다면 서식 태그 제거를 켜십시오.

강의 플랫폼에는 어떤 파일을 올려야 합니까?

대부분의 학습 플랫폼과 웹 플레이어는 WebVTT를 받으며, SRT도 받는 곳이 많습니다. 업로드 양식에 .vtt만 있다면 여기서 변환하고, .srt만 있다면 반대 방향인 VTT SRT 변환을 이용하십시오.

자막을 화면 위쪽에 표시할 수 있습니까?

WebVTT는 line:0 같은 큐 설정으로 이를 지원하며, 변환한 뒤 텍스트 편집기에서 추가하면 됩니다. SRT에는 위치를 저장하는 표준 방법이 없으므로, 변환된 큐는 기본 위치인 화면 아래쪽에서 시작합니다.

동영상 하나에 여러 언어 자막을 넣으려면 어떻게 합니까?

언어별 SRT를 각각 변환한 뒤, 파일마다 고유한 srclang과 label을 지정한 <track>을 하나씩 추가하십시오. 시청자는 플레이어의 자막 메뉴에서 언어를 고릅니다.