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 как место субтитра на экране — те же девять мест, что и {\an1} — {\an9} в SubRip — и записывает их обратно: line:0 для верха, line:50%,center для середины, position:10% align:start и position:90% align:end для боковых мест.

WebVTT в Subtitld

Открытие файла 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 они сравниваются бок о бок.

Интересные факты