HTML тег <track>

Значение и применение

Элемент <track> html5 позволяет добавить текстовые дорожки, синхронизированный текст (субтитры) для таких элементов как <audio> html5 (добавляет аудио контент на страницу) и <video> html5 (добавляет видео контент на страницу).

Элемент используется в качестве дочернего элемента для тегов <audio> html5 и <video> html5 .

Поддержка браузерами

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<track>	18.0	31.0	15.0	6.0	10.0	12.0

Атрибуты

Атрибут	Значение	Описание
default	default	Указывает, что данная дорожка должна быть включена по умолчанию.
kind	captions chapters descriptions metadata subtitles	Определяет вид текстовой дорожки.
label	text	Указывает заголовок текста дорожки.
src	URL	Указывает URL файла дорожки. Является обязательным атрибутом.
srclang	language_code	Указывает язык текста дорожки ( требуется, если kind = "subtitles" ).

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <track></title>
	</head>
	<body>
		<h1>Видео в HTML5</h1>
		<video width = "320" height = "240" poster = "10.jpg" controls>
			<source src = "123.mp4" type = "video/mp4">
			<source src = "123.ogg" type = "video/ogg">
			<track src = "sub_en.vtt" kind = "subtitles" srclang = "en" label = "English">
			<track src = "sub_ru.vtt" kind = "subtitles" srclang = "ru" label = "Russian" default>
			Ваш браузер не поддерживает видео тег.
		</video>
	</body>
</html>

В этом примере мы:

Добавили на страницу видео (тег <video> html5 ) шириной 320 пикселей и высотой 240 пикселей (атрибуты width = "320" height = "240"), атрибут poster - указывает местоположение изображения, которое пользователь будет видеть перед запуском видео (если атрибут не указан, то отображается первый кадр видео). Часто этим атрибутом пользователей вводят в заблуждение (отсутствие того контента, которое изображено на картинке).

Атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).

Использовали тег <source> html5 , который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы браузера необходимо указывать в тегах <source> html5 атрибут type (MIME-типы для видео):

Формат	MIME-типы
MP4	video/mp4
Ogg	video/ogg
WebM	video/webm

Благодаря тегу <track> html5 добавили субтитры к видео:

Добавили путь к файлу атрибутом src.
Установили тип дорожки - субтитры kind = "subtitles" (данный параметр устанавливается по умолчанию, также доступны навигационные параметры, метаданные и параметры для людей с ограниченными возможностями).
Установили язык дорожки srclang = "ru".
Отобразили названия двух дорожек label = "English", label = "Russian".
Выбрали дорожку по умолчанию атрибутом default.

Результат нашего примера:

Добавление видео с субтитрами на страницу (HTML тег <track>).

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги