HTML тег <track>

Тег <track> является одним из элементов HTML5. Он добавляет текстовые дорожки с временными метками — субтитры, подписи, описания, главы или метаданные — к медиаэлементу <video> или <audio>. Дорожка — это стандартный способ сделать медиаконтент доступным: она позволяет зрителям с нарушениями слуха читать произносимое, помогает носителям других языков следить за содержимым, а браузерам — предоставлять навигацию по главам.

Элемент <track> всегда является дочерним по отношению к элементу <video> или <audio> и размещается после всех элементов <source>. Он является пустым и указывает (через src) на внешний файл WebVTT (.vtt), содержащий текст с временными метками. Браузер автоматически отображает этот текст во время воспроизведения медиа.

Один медиаэлемент может содержать несколько элементов <track> — например, по одному для каждого языка — но не может иметь две дорожки с одинаковыми значениями kind, srclang и label.

Синтаксис

Тег <track> является пустым, то есть закрывающий тег не требуется. Однако в XHTML тег <track> должен быть самозакрывающимся (<track />).

HTML тег <track>

<audio> or <video>
  ...
  <track src="...">
  ...
</audio> or </video>

Пример HTML тега `<track>`:

HTML тег <track>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Попробуйте сами »

Атрибуты

Атрибут	Значение	Описание
`default`	`default`	Помечает дорожку как включённую по умолчанию, если только пользовательские настройки не указывают на более подходящую. Только одна дорожка на медиаэлемент может иметь этот атрибут.
`kind`	`subtitles`, `captions`, `descriptions`, `chapters`, `metadata`	Определяет тип текстовой дорожки (см. таблицу ниже). По умолчанию используется `subtitles`.
`label`	`text`	Понятное человеку название дорожки. Это имя отображается пользователю в меню выбора дорожки плеера (например, «English», «Français»).
`src`	`URL`	Путь к файлу WebVTT (`.vtt`). Обязательный атрибут.
`srclang`	`language_code`	Язык текста дорожки в виде тега BCP 47 (например, `en`, `fr`, `pt-BR`). Обязателен при `kind="subtitles"`.

Значения атрибута `kind`

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

Тег <track> также поддерживает глобальные атрибуты и атрибуты событий.

Что такое файл WebVTT?

Текст, отображаемый элементом <track>, хранится в отдельном файле, написанном в формате WebVTT (Web Video Text Tracks), сохранённом с расширением .vtt и передаваемом как text/vtt. Каждый файл WebVTT начинается со строки WEBVTT, за которой следует одна или несколько реплик. Каждая реплика содержит временной диапазон (start --> end, в формате hh:mm:ss.ttt) и текст, отображаемый в этом диапазоне:

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to the demo video.

Файл может содержать множество реплик, при желании разделённых пустыми строками; каждая реплика может иметь необязательную строку идентификатора над временной меткой. Браузер сопоставляет текущее время воспроизведения с репликой и отображает её текст поверх медиа.

Пример с несколькими дорожками

Распространённый сценарий — предложить подписи на одном языке и субтитры на другом. Задайте каждой дорожке чёткое значение label, чтобы пользователи могли выбрать нужную из меню плеера, и отметьте одну дорожку как default:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video
      controls
      width="320"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"
    >
      <track
        default
        kind="captions"
        srclang="en"
        label="English"
        src="captions-en.vtt"
      />
      <track
        kind="subtitles"
        srclang="fr"
        label="Français"
        src="subtitles-fr.vtt"
      />
    </video>
  </body>
</html>

Плеер показывает записи «English» и «Français» в меню субтитров/подписей; английские подписи отображаются по умолчанию, поскольку эта дорожка имеет атрибут default.

Доступность

Элемент <track> — это HTML-механизм для соответствия ключевым критериям успеха WCAG:

Подписи (WCAG 1.2.2) — предоставьте <track kind="captions">, чтобы пользователи с нарушениями слуха могли воспринимать как диалог, так и важные звуки в предварительно записанных медиа.
Аудиоописание (WCAG 1.2.3 / 1.2.5) — предоставьте <track kind="descriptions">, чтобы незрячие и слабовидящие пользователи получали описание важной визуальной информации.

Поскольку текст дорожки представляет собой текст с временными метками в отдельном файле, поисковые системы и вспомогательные технологии также могут его читать, что улучшает как доступность, так и обнаруживаемость контента.

Практика

Что делает HTML элемент track?

Он задаёт дополнительную аудиодорожку внутри аудиоэлемента.Он добавляет текстовые дорожки с временными метками (субтитры, подписи, описания, главы или метаданные) к видео- и аудиомедиа.Он добавляет CSS-таблицу стилей к HTML-документу.Он встраивает внешний видеофайл непосредственно на страницу.