Що таке WebVTT?

WebVTT (Web Video Text Tracks Format) — це текстовий формат субтитрів, який використовується для додавання синхронізованих текстових доріжок до відео. Це офіційний формат, підтримуваний HTML5 через елемент <track>, що дозволяє додавати:

• Субтитри (перекладена мова)
• Підписи (мова та звукові ефекти)
• Опис (візуальна інформація для скрінрідерів)
• Глави (точки навігації у відео)
• Метадані

Основна структура WebVTT

• Файл WebVTT складається з:
  • Необов’язкового заголовка (WEBVTT).
  • Необов’язкових метаданих (коментарі або блоки стилів/скриптів).
  • Кадрів (текстових сегментів з тайм‑кодуванням та вмістом).

1. Формат кадру

Кадр має таку структуру:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [налаштування кадру]
Текстовий вміст...

• Тайм‑кодування: час початку та закінчення у форматі HH:MM:SS.mmm.
• Налаштування (необов’язково):
  • vertical (lr/rl для вертикального тексту)
  • line (позиціонування)
  • position (горизонтальне вирівнювання)
  • size (ширина/відсоток)
  • align (start/middle/end)

2. Вміст кадру

• Може бути простим текстом або містити розмітку:
  • Теги: <b>, <i>, <u>, <ruby>, <lang> тощо.
  • Тайм‑коди (<00:00:05.000>) для караоке‑подібного тексту.

3. Стилізація та CSS

• Стилі можна застосовувати через:
  • Вбудовані кадри (за допомогою тегів).
  • CSS‑псевдоелементи (::cue, ::cue-region) у HTML.

4. Доріжки метаданих

• WebVTT може містити метадані (JSON тощо) для інтерактивних застосунків.

5. Кодування файлу

• Має бути UTF-8.
• Рядки закінчуються \r\n, \n або \r.

6. Правила обробки

• Парсери повинні коректно обробляти пошкоджені файли.
• BOM (Byte Order Mark) є необов’язковим.

7. Інтеграція з HTML5

• Використовується разом з елементом <track>:

  <video>
    <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
  </video>
  

  • kind може бути subtitles, captions, descriptions, chapters або metadata.

8. Підтримка браузерами

• Широко підтримується у сучасних браузерах (Chrome, Firefox, Safari, Edge).

9. Приклади використання

• Субтитри/підписи для доступності.
• Караоке‑текст з синхронізованим відображенням.
• Навігація по главах у відео.
• Метадані для інтерактивних відео‑додатків.

Приклад файлу WebVTT:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our tutorial on WebVTT.

00:00:04.000 --> 00:00:08.000
In this video, you'll learn how to add subtitles to your HTML5 videos.

Пошукові системи не можуть «переглядати» ваше відео, але вони можуть читати текстовий вміст. Використовуючи файли WebVTT, ви додаєте індексований текст, який:

• Покращує видимість: Google може індексувати підписи та транскрипції, завдяки чому ваші відео з’являються в більшій кількості результатів пошуку.
• Збільшує залученість: Відео з субтитрами утримують користувачів довше — підвищується тривалість сеансу та зменшується відсоток відмов.
• Покращує доступність: Субтитри важливі для людей з порушеннями слуху і враховуються у алгоритмах SEO.

Коли файл WebVTT прив’язаний до відео на веб‑сторінці, Google може розпарсити та зрозуміти цей синхронізований текст, роблячи контент більш релевантним для певних запитів.

Як додати WebVTT до відео HTML5

Ви можете підключити файл WebVTT до вашого відео за допомогою елемента <track>:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

• src: шлях до вашого файлу .vtt
• kind: тип текстової доріжки (subtitles, captions, chapters тощо)
• srclang: код мови (наприклад, en, es)
• label: назва доріжки, що відображається в плеєрі

WebVTT vs SRT: у чому різниця?

Інструменти для створення та редагування файлів WebVTT

Ви можете створювати або редагувати .vtt файли за допомогою:

• Текстових редакторів: VS Code, Sublime Text
• Редакторів субтитрів: Subtitle Edit, Amara, Aegisub
• Конвертерів: інструменти для перетворення SRT у VTT та навпаки

Як відкрити файл WebVTT?

Щоб відкрити файл WebVTT (.vtt), можна скористатися будь‑яким текстовим редактором або редактором субтитрів.

Відкриття у текстовому редакторі

• Windows: Notepad, Notepad++, VS Code
• macOS: TextEdit, Sublime Text
• Linux: Gedit, nano, Vim

Оскільки файли .vtt є простим текстом, їх можна переглядати та редагувати як будь‑який інший текстовий файл.

Відкриття у редакторі субтитрів

Для кращого форматування, попереднього перегляду та синхронізації:

• Subtitle Edit (Windows)
• Aegisub (крос‑платформний)
• Amara (веб‑засіб)

Відкриття у браузері

1. Створіть простий HTML‑файл з тегами <video> та <track>.
2. Відкрийте HTML‑файл у браузері, щоб переглянути відео з субтитрами.

Ключові характеристики файлів ASS

FAQ

Q1: У чому різниця між WebVTT та SRT?
A: WebVTT базується на SRT, але додає важливі можливості, такі як позиціонування тексту, голосові теги, CSS‑стилізація та підтримка метаданих, а також нативну інтеграцію з HTML5‑відео.

Q2: Як додати субтитри WebVTT до YouTube?
A: Завантажте ваш файл .vtt, коли додаєте субтитри до відео, або скористайтеся автоматичним створенням субтитрів YouTube та завантажте згенерований файл WebVTT для подальшого редагування.

Q3: Чи можуть файли WebVTT містити зображення?
A: Специфікація WebVTT не підтримує вбудовані зображення безпосередньо, проте можна використовувати мета‑кадри з URL‑адресами та реалізовувати кастомне відображення зображень за допомогою JavaScript.

Q4: Чому мої стилі WebVTT не застосовуються?
A: Переконайтеся, що блоки STYLE розташовані перед першим кадром, не містять порожніх рядків і правильно використовують псевдо‑елемент ::cue. Також перевірте сумісність браузера.

Q5: Чи працюють файли WebVTT з протоколами потокового передавання, такими як HLS?
A: Так, HLS (HTTP Live Streaming) підтримує сегментовані файли WebVTT для ефективного потокового передавання субтитрів разом з відео.

Посилання

• WebVTT: The Web Video Text Tracks Format