Перейти к содержимому

HTML-тег <track>

Тег <track> является одним из элементов HTML5. Он определяет субтитры, подписи, описания, главы или метаданные для медиаэлементов <audio> или <video>.

Атрибут kind определяет тип текстовой дорожки. Элемент указывает на исходный файл, содержащий синхронизированный текст, который браузер отображает, когда пользователь запрашивает дополнительную информацию. Для субтитров и подписей этот файл должен быть в формате WebVTT (.vtt).

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

Синтаксис

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

HTML-тег <track>

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

Пример использования HTML-тега <track>:

HTML-тег <track>

html
<!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="https://ru.w3docs.com/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="subtitles" srclang="en" src="https://ru.w3docs.com/build/videos/arcnet.io(7-sec).vtt"/>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Атрибуты

АтрибутЗначениеОписание
defaultdefaultУказывает, что дорожка должна быть включена, если только предпочтения пользователя не указывают на то, что другая дорожка более подходит. Только одна дорожка на медиаэлемент может иметь этот атрибут.
kindcaptions<br>chapters<br>descriptions<br>metadata<br>subtitlesОпределяет тип текстовой дорожки.
labeltextУказывает читаемый пользователем заголовок текстовой дорожки.
srcURLУстанавливает путь к файлу дорожки.
srclanglanguage_codeУстанавливает язык текстовых данных дорожки (обязательно для определения, если kind = "subtitles").

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

Практика

В чём заключается функциональность HTML-тега <track>?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.