WebVTT
Формат субтитрів вебу: те, що браузер показує через <track> у HTML. Блоки як у SubRip, із заголовком, крапкою перед мілісекундами і місцем для стилів, розташування та мовців.
Коротко
| Розширення | .vtt |
|---|---|
| Тип медіа | text/vtt |
| Специфікація | W3C, WebVTT: The Web Video Text Tracks Format, кандидат у рекомендації |
| Точність часу | Мілісекунди |
| Кодування тексту | Завжди UTF-8: так вимагає специфікація. Subtitld читає й інші кодування. |
| Стилізація | Теги курсиву, жирного і підкреслення; кольори через класи і CSS (::cue). Перекреслення немає. |
| Розташування | Параметри блоку (line, position, align, size, vertical) і регіони |
| Мовці | Теги голосу: <v Thom> |
| У контейнерах | Matroska як S_TEXT/WEBVTT; MP4 як wvtt (ISO/IEC 14496-30); потоки HLS і DASH |
Будова блоку
Файл складається із заголовка, а потім блоків. Кожен блок схожий на блок SubRip і має дві необов’язкові частини.
WEBVTT intro 00:00:23.000 --> 00:00:24.500 line:0 <v Celia>You're a jerk, <i>Thom</i>.
- 1 · Заголовок
WEBVTT, окремо або з пробілом і назвою, далі порожній рядок. Без нього браузер відмовляється відкривати весь файл. - 2 · Ідентифікатор
Необов’язковий. Назва блоку в окремому рядку: число, як у SubRip, або слово.
- 3 · Час
Початок, стрілка
-->, кінець. Крапка перед мілісекундами. - 4 · Параметри
Необов’язкові. Де показувати блок, після часу кінця.
- 5 · Текст
Рядки тексту з тегами для стилів і голосів. Порожній рядок закінчує блок, тому всередині блоку його немає.
Таймкод
Години можна пропустити. 00:27.000 — той самий час, і багато файлів коротші за годину записують саме так. Кома перед мілісекундами — звичка SubRip, а не WebVTT; Subtitld її все одно читає.
Блоки, окрім блоків-реплік
| Блок | Що містить |
|---|---|
NOTE |
Коментар для людей. Програвачі його пропускають. |
STYLE |
CSS для блоків через ::cue. Перед першим блоком. |
REGION |
Названа ділянка екрана, у яку можуть прокручуватися блоки. |
Текст блоку
| Тег | Ефект |
|---|---|
<i>…</i>, <b>…</b>, <u>…</u> |
Курсив, жирний, підкреслення |
<c.yellow>…</c> |
Клас, який може розфарбувати CSS (або вбудовані кольорові класи WebVTT) |
<v Thom>… |
Голос: хто говорить. Закривати необов’язково. |
<lang pt>…</lang> |
Мова фрагмента тексту |
<ruby>漢<rt>kan</rt></ruby> |
Читання над текстом, для японської та китайської |
<00:00:28.500> |
Позначка часу всередині блоку, для караоке |
& < > |
Амперсанд, <, > і нерозривний пробіл, які інакше сприйнялися б як розмітка |
Кольори
Вісім класів мають колір без жодного 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>Не кожен програвач читає блоки STYLE; вбудовані кольорові класи WebVTT безпечніший вибір. Subtitld використовує їх щоразу, коли колір є одним із восьми.
Параметри блоків
| Параметр | Що робить |
|---|---|
line:0 |
Рядок на екрані: число відраховує рядки зверху (від’ємне — знизу), відсоток — від верхнього краю |
position:10% |
Де на екрані розташоване поле блоку по горизонталі |
align:start |
Вирівнювання тексту в полі: start, center, end, left, right |
size:50% |
Ширина поля |
vertical:rl |
Вертикальний текст, справа наліво або зліва направо |
region:fred |
Показати блок у REGION |
Subtitld читає line, position і align як місце субтитра на екрані, тобто ті самі дев’ять позицій, що й {\an1}–{\an9} у SubRip, і записує їх назад: line:0 для верху, line:50%,center для середини, position:10% align:start і position:90% align:end для боків.
WebVTT у Subtitld
- Текст кожного субтитра і розриви рядків
- Курсив, жирний, підкреслення і колір
- Місце на екрані
- Мовці як теги голосу
- Початок і кінець з точністю до мілісекунди, у порядку
- Перекреслення: для нього в WebVTT немає тегу
- Обличчя і кольори мовців
- Переклади поруч з оригіналом (один може замінити його або бути під ним)
- Озвучення і метадані
Збережіть проєкт .usfx, щоб зберегти їх.
Відкриття файлу WebVTT
Subtitld знаходить кожен блок за рядком часу і читає:
- заголовок, блоки
NOTE,STYLEіREGIONяк те, чим вони є, а не як субтитри, а ідентифікатори блоків як назви; - час з годинами або без них, з крапкою або комою;
- голоси як мовців субтитрів, готових для озвучення;
- вбудовані кольорові класи WebVTT і кольори, які блок
STYLEзадає іншим класам; line,positionіalignяк місце субтитра на екрані;- будь-яке кодування, хоча WebVTT вимагає UTF-8.
Того, для чого немає місця, Subtitld не зберігає: регіони, розмір блоку, вертикальний текст, читання ruby і позначки часу караоке. Сам текст залишається.
Експорт WebVTT
Експорт, потім Субтитри і VTT, пропонує:
- ТекстОригінал, переклад або обидва, переклад нижче.
- Імена мовцівНе вказувати, перед текстом (Thom: …) або як теги голосу (
<v Thom>), власний спосіб WebVTT. - ФорматуванняЗберегти або прибрати.
- Зсув часуКожен субтитр раніше або пізніше на однакову величину.
Файл завжди в UTF-8, як того вимагає WebVTT: 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 обидва порівнюються поруч.
Цікаві факти
Він починався як WebSRT, розроблений у WHATWG для нового елемента <track> HTML5 і побудований на SubRip, перш ніж отримав назву WebVTT.
Шість літер на самому початку кожного файлу. Браузер, який їх не знаходить, відмовляється відкривати всю доріжку.
Кольорів, які програвач знає без CSS: white, lime, cyan, red, yellow, magenta, blue і black, для тексту та для фону.
Пов'язані формати
Відкрийте його в Subtitld разом із відео та вирівняйте за хвилею.