<track>: Элемент субтитров

Элемент <track> HTML используется в качестве дочернего элемента медиаэлементов, <audio> и <video>. Каждый элемент track позволяет указать субтитры или титры, которые можно отобразить параллельно с медиаэлементом, например, чтобы наложить субтитры или титры на видео или рядом с аудиодорожками.

Для одного медиаэлемента могут быть указаны несколько треков, содержащие различные типы субтитров или титры, переведенные для разных языков. Использованный трек будет либо трек, установленный по умолчанию, либо тот, который соответствует предпочтениям пользователя.

Трек форматируется в формате WebVTT (.vtt файлы) — Веб-видео субтитры.

Этот элемент включает глобальные атрибуты.

default

Этот атрибут указывает, что трек должен быть включён, если пользовательские настройки не определяют более подходящий трек. Этот атрибут может быть использован только на одном track элементе на один медиа элемент.

kind

Способ использования субтитров. Если не указано, тип по умолчанию subtitles. Если атрибут содержит недопустимое значение, используется значение metadata. Разрешены следующие значения:

• subtitles
  • Субтитры обеспечивают перевод содержимого, которое зритель не может понять. Например, речь или текст, не являющийся английским, в англоязычном фильме.
  • Субтитры могут содержать дополнительную информацию, обычно дополнительную справочную информацию. Например, текст в начале фильмов Звёздных войн или дата, время и место действия сцены.
• captions
  • Субтитры содержат транскрипцию и, возможно, перевод аудио.
  • Они могут включать важную невербальную информацию, такую как музыкальные обозначения или звуковые эффекты. Они могут указывать источник обозначения (например, музыка, текст, персонаж).
  • Подходят для слабослышащих пользователей или при выключенном звуке.
• chapters
  • Заголовки глав предназначены для навигации по медиа ресурсу.
• metadata
  • Трек, используемый скриптами. Невидим для пользователя.

label

Название субтитров, которое используется браузером при отображении доступных субтитров.

src

Адрес субтитров (.vtt файл). Должен быть допустимым URL-адресом. Этот атрибут должен быть указан, и его значение URL должно иметь тот же домен, что и документ, — если родительский элемент <audio> или <video> элемента track имеет атрибут crossorigin.

srclang

Язык текста субтитров. Должен соответствовать допустимому тегу языка BCP 47. Если атрибут kind установлен в subtitles, то атрибут srclang должен быть определён.

Тип данных, который track добавляет к медиа, задаётся в атрибуте kind, который может принимать значения subtitles, captions, chapters или metadata. Элемент указывает на файл с временными метками, которые браузер предоставляет при запросе дополнительной информации.

Медиаэлемент не может иметь более одного track с одинаковыми значениями kind, srclang и label.

Базовый TextTrack, указанный свойством track, получает событие cuechange каждый раз, когда изменяется текущая метка. Это происходит даже если трек не связан с медиаэлементом.

Если трек связан с медиаэлементом, используя элемент <track> как дочерний элемент <audio> или <video> элемента, событие cuechange также отправляется элементу HTMLTrackElement.

let textTrackElem = document.getElementById("texttrack");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});

Интерфейс JavaScript, представляющий элемент <track> — HTMLTrackElement. Субтитры, связанные с элементом, можно получить из свойства HTMLTrackElement.track, и оно будет типа TextTrack.

TextTrack объекты также можно добавить в HTMLVideoElement или HTMLAudioElement элементы с помощью метода HTMLMediaElement.addTextTrack(). TextTrack объекты, связанные с медиаэлементом, хранятся в списке TextTrackList, который можно получить с помощью свойства HTMLMediaElement.textTracks.

• Формат текстовых дорожек WebVTT
• HTMLMediaElement.textTracks