YamlBox

Конвертеры данных · 5 минута чтения

От SRT до VTT: субтитры, которые фактически загружает браузер.

Видеоэлемент HTML5 с радостью проигнорирует файл SRT: элемент браузера `<track>` загружает WebVTT и ничего больше. Таким образом, преобразование SRT в VTT является обычным шагом при публикации видео в Интернете, и различия между двумя форматами меньше, чем можно было бы ожидать, и именно поэтому преобразование стоит понять, а не рассматривать как черный ящик.

Обновлено

Что меняется между SRT и VTT

  • Заголовок — файлы WebVTT начинаются со строки `WEBVTT`, возможно, с заголовком после нее.
  • Таймкоды — SRT записывает `00:00:12,500` с запятой перед миллисекундами; VTT записывает `00:00:12.500` с точкой.
  • Идентификаторы сигнала — оба допускают необязательное имя над сигналом; VTT сохраняет их более полезными для сценариев.
  • Конечные таймкоды — требуются в SRT; VTT может сделать вывод об окончании следующей реплики, хотя явный вариант безопаснее.
  • Дополнительные функции — VTT добавляет настройки метки, такие как положение линии, выравнивание и текстовая разметка.

Стилизация и безопасная разметка

WebVTT допускает ограниченный набор тегов внутри вызова — `<b>`, `<i>`, `<u>` и `<c.classname>` для классов, которые вы оформляете с помощью CSS через `::cue`. Все остальное, скорее всего, будет отображаться как обычный текст. Именно поэтому преобразование должно сохранять простое форматирование, если оно присутствует, и отбрасывать то, что формат не может выразить, а не экранировать разметку в видимых угловых скобках.

                WEBVTT

00:00:12.500 --> 00:00:15.000 align:start
That was the point.

Почему это важно помимо воспроизведения

Субтитры являются требованием доступности на большинстве платформ, а также являются индексируемым материалом: текстовая дорожка предоставляет поисковым системам и помощникам машиночитаемый сценарий, который сам по себе звук не обеспечивает. Таким образом, правильно закодированный `<track kind="captions">` выполняет двойную функцию: обеспечивает соответствие требованиям и придает видео присутствие текста, которого в противном случае ему не хватало бы.

Кодировка имеет значение: используйте VTT как UTF-8 с соответствующей кодировкой. Файл с диакритическими символами, сохраненный в устаревшей кодировке, будет отображаться в плеере как моджибаке и будет выглядеть как ошибка преобразования, а не ошибка кодирования.

Практический рабочий процесс

  1. Преобразуйте SRT в VTT и проверьте первую и последнюю реплику на наличие правильных таймкодов.
  2. Сохраните как UTF-8 с расширением .vtt и используйте его с типом контента text/vtt, где вы управляете сервером.
  3. Ссылайтесь на него из элемента видео с помощью `<track kind="captions" srclang="en" label="English" default>`.
  4. Загрузите файл титров вместе с видеофайлом, чтобы относительные пути продолжали работать после развертывания.

Оффлайн и мгновенно

Файлы субтитров представляют собой большие текстовые документы и часто являются неизданными произведениями — сценарий обзорной версии никуда не следует загружать. Конвертер SRT в VTT на этом сайте работает в браузере, поэтому двухчасовая расшифровка преобразуется за долю секунды, не покидая вашего компьютера.

от SRT до VTT — часто задаваемые вопросы

Почему мой видеоплеер игнорирует файл субтитров?

Почти всегда потому, что это файл SRT, а не WebVTT. HTML5 `<track>` принимает только VTT. Преобразуйте в VTT, убедитесь, что файл начинается со строки WEBVTT, затем убедитесь, что в тайм-кодах используются точки, а не запятые.

Нужен ли YouTube и другим платформам VTT?

YouTube принимает загрузки как SRT, так и VTT и преобразует их внутри, но большинству самостоятельных проигрывателей и каждому видеоэлементу HTML5 требуется WebVTT. Преобразование перед загрузкой обеспечивает одинаковое отображение субтитров везде.

Можно ли стилизовать WebVTT?

Да — внутри ключевого текста вы можете использовать теги, выделенные жирным шрифтом, курсивом и подчеркиванием, а также диапазоны классов, а также стилизовать классы с помощью CSS с помощью псевдоэлемента `::cue`. Позиционирование контролируется с помощью настроек метки, таких как линия, положение и выравнивание.

Инструменты, упомянутые в этом посте

от XML до JSON Преобразуйте RSS, SOAP, карты сайта и конфигурацию XML в предсказуемый JSON. от CSV до JSON Преобразование экспорта CSV/TSV в массивы JSON или строки JSON. JSON Форматер Красиво распечатайте, минимизируйте и проверьте JSON с указанием точных местоположений ошибок. от YAML до JSON Преобразование конфигураций Kubernetes, Docker и CI в JSON с поддержкой нескольких документов.

Просмотрите полный список инструментов 19

Еще статьи для чтения

Все 19 публикации →