WebVTT — це формат субтитрів, який уміє читати браузер. І він єдиний: причепіть SRT до відео HTML5 — і не станеться абсолютно нічого. Ні помилки, ні попередження, ні субтитра.
Його розширення — .vtt, і всередині він дуже схожий на SRT. Змінюються три речі: він несе обовʼязковий заголовок, ставить точку там, де SRT ставить кому, і вміє висловити значно більше, ніж SRT здатний.
Що всередині
WEBVTT
1
00:00:04.120 --> 00:00:06.480
Перед тим як перейти до цифр,
переглянемо, де ми зараз.
2
00:00:06.600 --> 00:00:09.000 line:90% align:start
Чого я не чекав,
то це падіння другого тижня.
Цей перший рядок зобовʼязаний казати WEBVTT. Якщо його немає, якщо перед ним стане позначка порядку байтів або якщо йому передує порожній рядок, браузер позбувається всього файлу.
Далі — ті самі блоки, що й раніше. З двома різницями, які видно одним поглядом: точка перед мілісекундами й можливість причепити налаштування в кінці рядка з часом.
Що він додає порівняно з SRT
Положення й вирівнювання. line:90% опускає субтитр нижче, align:start тулить його ліворуч, а position:20% зсуває набік. Зручно, щоб не перекривати титр, який уже є в картинці.
Стиль. Блок STYLE зі справжнім CSS на початку файлу й класи, розсіяні в тексті через <c.оповідач>. Кольори, розміри, тіні.
Хто говорить. Позначка <v Марта>Привіт</v> — це спосіб позначити голос. Плеєри, здатні її розпізнати, можуть намалювати її іншим кольором; решта проходить мимо, не спиняючись. На інтервʼю чи зустрічі це межа між стіною тексту й чимось читабельним.
Ділянки й нотатки. Блоки NOTE тримають коментарі, яких ніхто не бачить, а REGION обмежує зони екрана зі своїм власним прокручуванням, як титри, що піднімаються на прямій трансляції.
Позначки блоків. Над рядком із часом кожен блок приймає імʼя — intro, question-3 — щоб звертатися до нього з JavaScript.
Коли вам потрібен VTT
Кожного разу, коли відео відтворюється в браузері. Якщо на вашій сторінці є <video> зі своїм <track>, цей файл має бути WebVTT:
<video controls>
<source src="zustrich.mp4" type="video/mp4" />
<track src="zustrich.vtt" kind="subtitles" srclang="uk" label="Українська" default />
</video>
І так само з нинішніми вебплеєрами (Video.js, Plyr, Shaka) і з передачею HLS, яка роздає субтитри у вигляді відрізків WebVTT.
За дверима браузера його майже ніхто не вимагає: компʼютерні редактори, плеєри, якими всі користувалися завжди, і майже всі форми завантаження досі чекають на SRT.
Дві речі, що зриваються, і файл у них не винен
Сервер зобовʼязаний віддати його як text/vtt. Виданий як text/plain чи application/octet-stream, він у деяких браузерах летить у кошик. Це вирішується в налаштуваннях сервера, ніколи у файлі.
І він має приходити з того самого походження або нести CORS. .vtt, розміщений на іншому домені без заголовка Access-Control-Allow-Origin, не завантажиться ніколи, навіть якщо адреса чудово працює, коли ви відкриваєте її вручну. Це перша причина класичного «відео йде, а субтитрів немає».
Жодна з двох не є проблемою вмісту й жодна не залишає видимої помилки на сторінці. Вони зʼявляються у вкладці мережі в інструментах браузера, і лише якщо ви знаєте, що туди треба заглянути.
Перевести його
Шлях від SRT до VTT простий: поставити заголовок, замінити кому точкою й захистити ті символи & і <, які SRT тримає як текст і які WebVTT прийняв би за розмітку. Наш конвертер SRT у VTT вирішує всі три у вашому браузері, не випускаючи файл нікуди.
У зворотний бік усе, чого SRT не вміє сказати, залишається за дверима — положення, стиль, ділянки — і тому конвертер VTT у SRT це відкидає й перетворює позначки голосу на «Марта:» на початку рядка, як це вміє показати SRT. Який вибрати й для чого.
Якщо у вас є відео, а не субтитри
Завантажте його — і ми повернемо транскрипцію з її хвилинами, з кожним голосом окремо й названим, і з підсумком. VTT випадає звідти вже складеним і з позначеними голосами. Без акаунта, щоб почати.