HTML track 코드 생성
또는 자막 텍스트를 붙여넣으세요
옵션
자막(subtitles)은 소리를 들을 수 있고 말이 필요한 시청자를 위한 것입니다. 번역이거나 같은 언어를 적은 것이지요. 캡션(captions)은 소리를 들을 수 없는 시청자를 위한 것이라, 소리가 모두에게 전하는 것도 담습니다. 음악, 문소리, 전화벨 같은 것입니다. 같은 파일이 둘 중 어느 용도로도 쓰일 수 있어서 이 페이지는 짐작하지 않고 묻습니다. 그리고 이 값은 나중에 요소 안에서 바꿀 수 없습니다. 설명, 챕터, 메타데이터는 제시하지 않습니다. 어느 것도 자막 파일의 내용으로 채울 수 없기 때문입니다.
en, en-GB, pt-BR 같은 짧은 언어 태그이며, 영상의 언어가 아니라 자막에 담긴 말의 언어를 적습니다. 스스로 자막(subtitles)이라고 밝히는 트랙은 언어를 반드시 적어야 하므로, 이 상자를 비우면 속성을 빼는 대신 en으로 되돌아갑니다. 모든 속성이 결과물에 그대로 인쇄되므로, 붙여 넣기 전에 이 되돌림을 확인할 수 있습니다.
자유 텍스트입니다. English, English (SDH), Français처럼 적습니다. 한 페이지가 트랙을 여러 개 제공할 때 시청자가 고르는 줄이므로, 보는 사람이 알아볼 이름으로 쓰세요. 상자를 비우면 빈 속성을 쓰는 대신 속성 자체를 빼서 이름 짓기를 플레이어에 돌려줍니다. 빈 레이블은 그 메뉴에 이름 없는 줄을 만들 뿐입니다.
켜면 영상이 재생되자마자 자막이 나옵니다. 미디어 요소는 기본 트랙을 하나만 가질 수 있으므로, 페이지에 이미 하나가 있으면 꺼 두세요. 두 번째 트랙이 자기를 기본이라고 하면 플레이어가 엉뚱한 것을 고르고, 기본이 아니면 시청자가 직접 켜기만 하면 됩니다.
타이밍을 어떤 프레임 레이트 기준으로 세는지 정합니다. 형식 안내 페이지에서는 MicroDVD가 이 값을 필요로 합니다. 시간을 프레임 번호로 저장하기 때문입니다. 프레임 레이트 페이지에서는 이 파일이 어느 프레임 레이트를 기준으로 만들어졌는지, 즉 자막을 만든 판본의 값을 뜻하며, 페이지의 두 번째 상자에는 이 자막을 사용할 영상의 프레임 레이트를 넣습니다. 흔히 쓰는 값은 23.976, 24, 25, 29.97, 30, 50, 59.94, 60입니다. 잘못 넣으면 시간축 전체가 어긋나고, 프레임 레이트 페이지에서는 고정된 양이 아니라 비율로 어긋납니다.
이 페이지는 자막을 페이지에 붙여 넣을 수 있는 하나의 HTML 요소 안에 넣습니다. 결과는 WebVTT를 src 속성에 인라인한 track 한 줄이며, 자막 텍스트가 마크업과 함께 이동합니다. 따로 올릴 파일도 없고, 경로를 맞출 일도 없고, 플레이어가 없는 것을 찾아 헤매게 될 일도 없습니다.
인라인이 이 페이지의 핵심이고, 이유는 브라우저가 로컬 파일을 다루는 방식입니다. 트랙은 그려지는 것이 아니라 가져와지고, 브라우저는 페이지 자체가 디스크에서 열렸을 때 그 가져오기를 거부합니다. 그래서 바탕화면에 저장한 페이지의 track src="film.vtt"는 아무것도 보여 주지 않습니다. 화면에 오류도 없고, 자막 메뉴는 비어 있고, 대부분 열지 않는 콘솔에 한 줄이 남을 뿐입니다. data URI는 가져오지 않습니다. 텍스트가 속성 안에 있기 때문입니다. 그래서 거기서는 동작합니다. 비용은 크기입니다. WebVTT의 모든 공백과 줄바꿈이 세 글자가 되지만, 이 페이지에서는 그 비용을 치를 만합니다. 이 요소는 혼자서 동작하도록 존재하기 때문입니다.
속성은 패널의 상자에서 옵니다. 파일에서 읽어 낼 수 있는 것이 하나도 없기 때문입니다. kind가 가장 중요합니다. subtitles는 오디오를 따라갈 수 없는 시청자를 위한 번역이고, captions는 소리를 들을 수 없는 시청자를 위해 음악과 음향 효과까지 담는 더 완전한 판본입니다. [door slams]와 음표가 가득한 파일은 둘 중 어느 쪽도 될 수 있고, 어느 관객을 위해 만들어졌는지는 사용자만 압니다. 그래서 페이지는 추측하지 않고 묻습니다. 나머지 셋은 텍스트의 언어, 플레이어 자막 메뉴에 보일 이름, 트랙이 스스로 열려야 하는지입니다.
상자를 비웠을 때 다르게 동작하는 것이 둘 있고, 그 차이는 알아 둘 만합니다. 메뉴 이름을 비우면 속성이 통째로 사라집니다. label은 선택 사항이고 빼면 선택을 플레이어에 넘기기 때문입니다. 언어 상자를 비우는 것은 다릅니다. 스스로를 subtitles로 선언하는 트랙은 언어를 밝혀야 하므로, 빈 상자는 반드시 있어야 할 것을 빠뜨린 요소를 만드는 대신 en으로 되돌아갑니다. 둘 다 조용한 대체가 아닙니다. 출력은 모든 속성을 인쇄하므로 상자가 무엇을 만들었는지 볼 수 있습니다.
예시
기본 상자로 SRT 파일
입력
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
결과물
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
한 줄이 나오고 파일 전체가 그 안에 들어 있습니다. %0A는 줄바꿈이고 %20은 공백이라, WebVTT가 페이지 옆 파일이 아니라 src 속성 안에서 함께 갑니다. 네 속성은 네 상자입니다. 텍스트의 언어, 플레이어 자막 메뉴에서 시청자가 고르는 행, 그리고 이 트랙을 스스로 열리게 하는 default입니다. SRT의 큐 번호는 큐 식별자로 유지됩니다.
WebVTT 파일은 같은 WebVTT로 나간다
입력
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
결과물
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
WebVTT 파일이 큐 바깥에 담는 것은 모두 살아남습니다. WEBVTT 줄의 주석, NOTE 블록, 플레이어에서 자막 모양을 정하는 STYLE 블록, 큐의 이름 줄, 그리고 큐별 설정 align:start position:10%입니다. 그 안의 %25는 퍼센트 기호이며, URI 안에서는 맨 퍼센트 기호가 허용되지 않아 인코딩된 것입니다. WebVTT로 들어온 파일은 같은 WebVTT로 나갑니다. 두 상자가 en-GB와 English (UK)인 것은 이 파일이 영국 관객을 위해 만들어졌기 때문이며, 파일은 그것을 말하지 않았습니다.
소리를 들을 수 없는 시청자를 위한 자막
입력
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
결과물
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
파일이 음향 효과와 음악으로 가득하고, 그것이 바로 kind="captions", 즉 소리를 들을 수 없는 시청자를 위한 자막이 필요한 경우입니다. 파일만으로는 말할 수 없고 이 상자가 유일한 표현입니다. 별개로 메뉴 이름을 Tom & "the boss"로 입력했더니 Tom & "the boss"로 나옵니다. 이스케이프하지 않은 따옴표는 그 자리에서 속성을 닫아 버리고 이름의 나머지를 요소 위의 엉뚱한 속성으로 만들었을 것입니다.
비웠거나 껐거나 한 세 상자
입력
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
결과물
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
세 상자를 바꿨더니 결과도 셋입니다. HTML이 요구하는 것이 다르기 때문입니다. 메뉴 이름은 요소에서 아예 사라집니다. 선택 사항이고 빼면 결정이 플레이어로 넘어갑니다. 언어 상자는 비었는데도 srclang="en"을 만듭니다. 스스로를 subtitles로 선언하는 트랙은 언어를 밝혀야 하므로 빈 언어란 존재할 수 없고, 되돌아간 값이 출력에 보입니다. default 스위치는 꺼져 있고 그 속성도 사라졌으므로 이 트랙은 스스로 열리지 않습니다. 한 페이지에 트랙이 여럿일 때 안전한 방향입니다.
자주 묻는 질문
페이지 옆에 .vtt 파일을 여전히 두어야 하나요?
아니요, 그것이 이 페이지의 요점입니다. WebVTT가 data: URI로 src 속성에 쓰이므로 요소가 자기 자막을 스스로 담습니다. 페이지에 붙여 넣거나 파일을 메일로 보내거나 다른 폴더로 옮겨도 자막이 나타납니다. 주의할 것은 전체가 하나의 속성이라는 점입니다. 긴 줄의 일부만 복사하면 URI가 깨져 트랙이 비게 됩니다.
내 컴퓨터에서 파일을 그냥 열어도 동작하나요?
네, 그 경우가 이 페이지가 자막을 인라인하는 이유입니다. 디스크에서 페이지를 열면 브라우저가 별도 트랙 파일 가져오기를 거부하므로 film.vtt를 가리키는 트랙은 아무것도 보여 주지 않습니다. 눈에 보이는 오류 없이 자막 메뉴만 비어 있습니다. data: URI는 가져오지 않고 텍스트가 이미 속성에 있으므로 바탕화면에서도 서버에서와 똑같이 동작합니다.
출력이 자막 파일보다 왜 이렇게 긴가요?
글자나 숫자가 아닌 모든 문자가 URI에서 세 글자가 되기 때문입니다. 공백은 %20, 줄바꿈은 %0A입니다. 100킬로바이트 파일이 몇백 킬로바이트가 됩니다. Base64가 원본의 3분의 1 정도 늘어나는 데 그쳐 더 짧겠지만 읽을 수 없는 문자 벽이 됩니다. 지금 방식이면 src 속성을 들여다보고 자기 대사를 알아볼 수 있고, 페이지에 붙여 손으로 관리할 파일에서는 그만한 값을 합니다.
상자를 비웠는데 label 속성이 왜 없나요?
HTML에서 메뉴 이름은 선택 사항이고, 빼는 것이 '이름 없음'을 뜻하지 않기 때문입니다. 플레이어가 자막 메뉴에 무엇을 보여 줄지, 보통은 언어를 정합니다. 그래서 상자를 비우면 빈 속성을 쓰는 대신 속성을 제거합니다. label=""는 그 메뉴에 빈 행으로 보이기 때문입니다. 언제든 이름을 다시 넣을 수 있고, 그것은 평범한 문자열이며 페이지의 다른 어떤 것도 거기에 의존하지 않습니다.
여기서 subtitles와 captions는 무엇이 다른가요?
누구를 위한 것인지가 다릅니다. subtitles는 시청자가 오디오를 들을 수 있고 단어의 번역이나 표기가 필요하다고 가정하고, captions는 들을 수 없다고 가정하므로 소리로 전달되는 정보, 즉 음악·문·전화 벨까지 담습니다. 한 파일이 어느 쪽도 될 수 있고 텍스트는 같으므로 페이지는 어느 쪽을 뜻하는지 알 수 없습니다. 요소 안에서 나중에 바꿀 수도 없으니 관객에게 필요한 쪽을 고르세요.
다른 트랙 종류는 왜 빠졌나요?
셋입니다. descriptions는 화면을 볼 수 없는 시청자를 위해 그림을 설명하고, chapters는 자막이 아니라 탐색이라 이 사이트에 자기 페이지가 있으며, metadata는 아무에게도 보이지 않습니다. 셋 다 자막 파일의 내용으로 채울 수 없으므로 제공하면 아무것도 표시하지 않는 요소를 만들게 할 뿐입니다. 제공하는 둘은 자막 파일이 실제로 맡을 수 있는 둘입니다.
자막 내용이 들어오는 동안 바뀌는 것이 있나요?
텍스트와 시간과 스타일은 바뀌지 않고, WebVTT 파일은 자기 주석·스타일·영역 블록과 큐별 설정을 유지합니다. 바뀌는 것은 모양입니다. 줄이 플레이어가 읽는 WebVTT 문법으로 다시 쓰이므로 SRT의 00:00:01,000에 있는 쉼표가 마침표가 됩니다. 한 바이트는 일부러 버립니다. 파일이 UTF-8임을 알리는 선두 표시인데, data URI가 인코딩을 스스로 말하고 그대로 두면 앞에 세 글자가 어긋나 보이기 때문입니다.