html.okpython.net
Основы создания сайтов
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