WebVTT

큐의 구조

파일은 헤더와 그 뒤의 큐로 이루어집니다. 각 큐는 SubRip과 비슷한 블록이며, 선택 사항인 두 부분이 있습니다.

WEBVTT
 
intro
00:00:23.000 --> 00:00:24.500 line:0
<v Celia>You're a jerk,
<i>Thom</i>.
 

타임코드

큐 외의 블록

큐 텍스트

색상

CSS 없이도 색이 정해지는 클래스는 여덟 가지입니다: white, lime, cyan, red, yellow, magenta, blue, black이며, 같은 여덟 가지에 bg_를 붙이면 배경색이 됩니다. 그 밖의 색상에는 직접 만든 클래스와 STYLE 블록이 필요합니다:

STYLE
::cue(.gold) { color: #ffd700; }

00:00:30.800 --> 00:00:34.000
<c.gold>Why don't you just admit that</c>

큐 설정

Subtitld는 line, position, align을 화면에서 자막이 놓이는 위치로 읽습니다. 이는 SubRip의 {\an1}부터 {\an9}까지와 같은 아홉 위치이며, 저장할 때도 같은 방식으로 씁니다. 위쪽은 line:0, 가운데는 line:50%,center, 양쪽 옆은 position:10% align:start와 position:90% align:end입니다.

Subtitld의 WebVTT

WebVTT 파일 열기

Subtitld는 시간 줄을 기준으로 각 큐를 찾고, 다음을 읽습니다:

• 헤더, NOTE, STYLE, REGION 블록은 자막이 아니라 본래의 역할로, 큐 식별자는 이름으로 읽습니다;
• 시가 있거나 없는 시간, 마침표나 쉼표를 쓴 시간;
• 음성은 자막의 화자로, 더빙에 바로 쓸 수 있도록 읽습니다;
• WebVTT의 색상 클래스와, STYLE 블록이 다른 클래스에 준 색상;
• 화면에서의 위치로서의 line, position, align;
• 어떤 인코딩이든, 다만 WebVTT는 UTF-8을 요구합니다.

Subtitld는 둘 곳이 없는 것은 빼 둡니다: 영역, 큐의 크기, 세로쓰기, 루비의 읽기 표기, 가라오케 타임스탬프. 텍스트 자체는 남습니다.

WebVTT 내보내기

Export 다음 Subtitles와 VTT를 선택하면 다음 옵션을 제공합니다:

• Text원문, 번역, 또는 둘 다(번역은 아래에 놓입니다).
• Speaker names제외하거나, 텍스트 앞에(Thom: …) 쓰거나, WebVTT 방식인 음성 태그(<v Thom>)로 씁니다.
• Formatting유지하거나 제거합니다.
• Shift times모든 자막을 같은 값만큼 앞이나 뒤로 옮깁니다.

파일은 WebVTT가 요구하는 대로 항상 UTF-8입니다. WEBVTT로 시작하고, 큐는 시작 시간 순으로 이어지며, 모든 시간에는 시가 붙습니다. 마크업으로 읽힐 문자는 엔티티로 쓰이고, 빈 자막은 제외됩니다.

웹 페이지에서

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

파일은 text/vtt로 제공하세요. 다른 도메인에서 가져온다면, 비디오에는 crossorigin이 필요하고 서버에는 Access-Control-Allow-Origin 헤더가 필요합니다. 그렇지 않으면 브라우저가 트랙을 불러오지 않습니다.

WebVTT인가 SubRip인가?

플레이어, 편집기, 업로드에는 SubRip을, 웹의 비디오에는 WebVTT를 쓰세요. SubRip 페이지에서 두 형식을 나란히 비교합니다.

상식