PricingLoginStart free
HTML Academy · Урок

Субтитры с track и WebVTT

Добавляйте к видео подписи и субтитры с помощью track и файлов .vtt

Урок 4 из 414 шагов

«Субтитры с track и WebVTT» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Субтитры и подписи

Специальные возможности видео требуют текстовых альтернатив для аудиосодержимого:

  • Субтитры — расшифровка диалогов, предполагающая, что зритель может слышать звуки
  • Подписи — диалоги и описания звуков (для глухих пользователей)
  • Тифлокомментарии — описание визуального содержимого для незрячих пользователей

Элемент track

Элемент <track> связывает файл субтитров или подписей с видео:

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

Атрибуты track

Атрибуты элемента track:

  • src — путь к файлу VTT
  • kind — тип дорожки (субтитры, подписи, тифлокомментарии, главы, метаданные)
  • srclang — код языка BCP 47 (en, es, fr...)
  • label — понятное человеку название, отображаемое в меню CC
  • default — логическое значение; эта дорожка отображается по умолчанию

Формат WebVTT

WebVTT (текстовые дорожки веб-видео) — это формат файла субтитров:

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello and welcome to the HTML5 tutorial.

00:00:04.500 --> 00:00:08.000
In this lesson, we'll cover the video element
and how to add subtitles.

00:00:09.000 --> 00:00:12.000
[Keyboard click sounds]
Let's look at a code example...

Идентификаторы меток VTT

Метки VTT могут иметь необязательные идентификаторы:

WEBVTT

intro-1
00:00:01.000 --> 00:00:04.000
Welcome to the tutorial.

intro-2
00:00:04.500 --> 00:00:08.000
We'll cover HTML5 video today.

00:00:09.000 --> 00:00:12.000
No identifier on this cue — that is fine.

Настройки меток VTT

Метки VTT поддерживают настройки позиционирования:

WEBVTT

00:00:01.000 --> 00:00:04.000 position:10% align:left
This text is positioned at the left.

00:00:05.000 --> 00:00:08.000 line:10%
This text appears near the top.

00:00:09.000 --> 00:00:12.000 size:50% position:75%
A smaller caption on the right.

Стилизация меток WebVTT с помощью CSS

Стилизуйте блоки меток с помощью псевдоэлемента ::cue:

/* Style all cues: */
::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 1.2rem;
  font-family: 'Arial', sans-serif;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* Style specific voice tags: */
::cue(v[voice="Teacher"]) {
  color: #60a5fa;
}

Значения kind у элемента track

Атрибут kind указывает назначение текстовой дорожки:

  • subtitles — перевод или расшифровка диалогов
  • captions — диалоги и описания звуков для глухих пользователей
  • descriptions — тифлокомментарии к визуальному содержимому для незрячих пользователей
  • chapters — названия глав для навигации
  • metadata — данные, предназначенные для обработки JavaScript

Дорожка глав

Используйте kind=chapters для навигации по главам видео:

<track
  kind="chapters"
  src="chapters.vtt"
  srclang="en"
  label="Chapters"
>

<!-- chapters.vtt: -->
<!--
WEBVTT

00:00:00.000 --> 00:01:30.000
Introduction

00:01:30.000 --> 00:05:00.000
HTML Document Structure

00:05:00.000 --> 00:10:00.000
Forms and Input
-->

API TextTrack JavaScript

Получайте данные дорожки с помощью API TextTrack:

const video = document.getElementById('tutorial');
const tracks = video.textTracks;

// Enable a track:
tracks[0].mode = 'showing';  // 'hidden', 'showing', or 'disabled'

// Listen for active cue changes:
tracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) console.log('Current cue:', cue.text);
});

Дорожка метаданных для интерактивного видео

Используйте дорожки метаданных, чтобы запускать события JavaScript в определённые моменты:

<track kind="metadata" src="interactive.vtt" id="meta-track">

<script>
video.textTracks[0].mode = 'hidden';
video.textTracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) {
    const data = JSON.parse(cue.text);
    // Trigger quiz, show annotation, etc.
    showAnnotation(data);
  }
});
</script>

Требования к специальным возможностям

WCAG требует наличия подписей для предварительно записанного видео:

  • Уровень A — подписи для всех предварительно записанных видео со звуком
  • Уровень AA — тифлокомментарии для всех предварительно записанных видео
  • Автоматически созданные подписи (YouTube) недостаточны без проверки
  • Подписи должны быть точными, синхронизированными и полными

Быстрая проверка

В чём разница между типами дорожек subtitles и captions?

Ответь в интерактивном уроке

Итоги: track и WebVTT

Основные сведения о субтитрах и подписях:

  • <track src kind srclang label default> внутри video
  • kind: subtitles, captions, descriptions, chapters, metadata
  • Формат файла WebVTT: WEBVTT + временная метка --> временная метка + текст
  • Стилизуйте метки с помощью псевдоэлемента CSS ::cue
  • WCAG требует подписей для предварительно записанного видео
Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
40
Уроки
159
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Субтитры с track и WebVTT» бесплатный?

Да — полный текст урока «Субтитры с track и WebVTT» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Субтитры с track и WebVTT»?

Добавляйте к видео подписи и субтитры с помощью track и файлов .vtt Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Субтитры с track и WebVTT»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Элемент audio: src controls loop autoplay
  2. Элемент video и соотношение сторон
  3. Элемент source для нескольких форматов
  4. Субтитры с track и WebVTT
← Назад к HTML Academy