html.okpython.net
HTML и CSS для начинающих

HTML :: Тег <track>

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

Синтаксис

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

Атрибуты

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

Ссылки

Примеры

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