HTML :: Тег <track>

В HTML тег <track> (от англ. track – дорожка) используется для создания синхронизированных текстовых дорожек внутри элементов <audio> и <video>. Обычно такая дорожка содержит субтитры на разных языках, комментарии, заголовки и т.д.

Синтаксис

	<track>		             										(закрывающий тег отсутствует)

Атрибуты

default – данный логический атрибут сообщает о том, что данная текстовая дорожка должна быть включена по умолчанию, если пользовательские настройки не указывают на то, что другая текстовая дорожка является более подходящей. Только одна дорожка может иметь атрибут default.
kind – определяет тип текстовой дорожки:
- "subtitles" – субтитры, которые выводятся поверх видео; субтитры обычно используются для глухих людей либо содержат перевод на другие языки для тех, кто не знаком с языком оригинала; значение используется по умолчанию;
- "captions" – заголовки, которые выводятся поверх видео; заголовки обычно используются для дублирования диалогов и звуковых эффектов для глухих людей и в случаях, когда звук недоступен;
- "descriptions" – текстовое описание видеоконтента для глухих людей;
- "chapters" – название глав, которое используется для навигации по медиа-ресурсу;
- "metadata" – метаданные, которые предназначены для браузеров и пользователю не видны.
label – отображаемый пользовательский заголовок текстовой дорожки; если он не указан, то браузер выведет значение, которое у него принято по умолчанию (например, untitled1).
src – указывает путь к файлу с дорожкой. В качестве значения атрибута могут использоваться как абсолютные, так и относительные адреса (подробнее здесь).
srclang – язык текстовой дорожки (ознакомиться с полным списком кодов языков можно на нашей странице здесь).
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/media.html#the-track-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/track

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<base href="https://site.name/">
	<title>Пример №1</title>
</head>
<body>
     
<p>
  <video poster="html/html_images/textbook_images/dog_foto.jpg" controls>
   
		<source src="html_files/video/Саймон.ogg">
		<source src="html_files/video/Саймон.mp4">

		<track 
			kind="subtitles" 
			src="html_files/video/sub.en.vtt" srclang="en" 
			label="English"
		>

		<track 
			kind="subtitles" 
			src="html_files/video/sub.ru.vtt" srclang="ru" 
			label="Русский" default
		>

		Элемент video не поддерживается вашим браузером.
	
  </video> 
</p>


<p>
	Содержимое файла sub.ru.vtt в формате субтитров VTT
</p>

<p>
	WEBVTT FILE
	
	00:00.000 --> 00:08.490<br>
	Саймон смотрит в окно.<br><br>

	00:08.500 --> 00:14.700<br>
	Саймон услышал друга.<br><br>

	00:14.900 --> 00:44.000<br>
	Саймон общается с ним.
</p>
	
</body>
</html>

Пример №1