HTML тег <track>html5

HTML теги

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

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

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

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

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<track>html518.031.015.06.010.012.0

Атрибуты

АтрибутЗначениеОписание
defaulthtml5defaultУказывает, что данная дорожка должна быть включена по умолчанию.
kindhtml5captions
chapters
descriptions
metadata
subtitles
Определяет вид текстовой дорожки.
labelhtml5textУказывает заголовок текста дорожки.
srchtml5URLУказывает URL файла дорожки. Является обязательным атрибутом.
srclanghtml5language_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-типы
MP4video/mp4
Oggvideo/ogg
WebMvideo/webm

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

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

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

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

Нет.

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

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

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

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

HTML теги