HTML-тег <track>
The <track> tag defines subtitles, captions, descriptions, chapters, or metadata for either <audio> or <video> media element. The tag is a child tag of these tags.
Тег <track> является одним из элементов HTML5. Он определяет субтитры, подписи, описания, главы или метаданные для медиаэлементов <audio> или <video>.
Атрибут kind определяет тип текстовой дорожки. Элемент указывает на исходный файл, содержащий синхронизированный текст, который браузер отображает, когда пользователь запрашивает дополнительную информацию. Для субтитров и подписей этот файл должен быть в формате WebVTT (.vtt).
Медиаэлемент не может содержать более одной дорожки с одинаковыми значениями label, srclang и kind.
Синтаксис
Тег <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 | captions``<br>``chapters``<br>``descriptions``<br>``metadata``<br>``subtitles | Определяет тип текстовой дорожки. |
label | text | Указывает читаемый пользователем заголовок текстовой дорожки. |
src | URL | Устанавливает путь к файлу дорожки. |
srclang | language_code | Устанавливает язык текстовых данных дорожки (обязательно для определения, если kind = "subtitles"). |
Тег <track> также поддерживает Глобальные атрибуты и Атрибуты событий.
Практика
В чём заключается функциональность HTML-тега <track>?