HTML тег <track>
Значение и применение
Элемент <track> позволяет добавить текстовые дорожки, синхронизированный текст (субтитры) для таких
элементов как
<audio>
(добавляет аудио контент на страницу) и
<video>
(добавляет видео контент на страницу).
Элемент используется в качестве дочернего элемента для тегов
<audio>
и
<video>.
Текстовая дорожка хранится в WebVTT-файле: первая строка WEBVTT, далее интервалы времени и реплики. subtitles передаёт речь, captions также описывает значимые звуки, metadata предназначено для скриптов. Проверяйте загрузку через HTTP-сервер: открытие с диска и ограничения CORS могут помешать загрузке дорожки.
Поддержка браузерами
Спецификация: multipage
Поддерживается во всех основных браузерах с 2015 года.
Отдельные значения (1) поддерживаются не везде — смотрите таблицу.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
track | 23 | 12 | 31 | 12.1 | 6 | 25 Версия 25 выпущена в 2013 г. Примечание MDN (англ.) Doesn't work for fullscreen video. | 31 | 12.1 | 6 | 1.5 Версия 1.5 выпущена в 2013 г. Примечание MDN (англ.) Doesn't work for fullscreen video. | 4.4 Версия 4.4 выпущена в 2013 г. Примечание MDN (англ.) Doesn't work for fullscreen video. | 6 |
default | 23 | 12 | 31 | 12.1 | 6 | 25 | 31 | 12.1 | 6 | 1.5 | 4.4 | 6 |
kind | 23 | 12 | 31 | 12.1 | 6 | 25 | 31 | 14 | 6 | 1.5 | 4.4 | 6 |
descriptions | ||||||||||||
label | 23 | 12 | 31 | 12.1 | 6 | 25 | 31 | 14 | 6 | 1.5 | 4.4 | 6 |
src | 23 | 12 | 50 Версия 50 выпущена в 2016 г. Версия 31 выпущена в 2014 г. — Удалено в 50; Частичная поддержка Примечание MDN (англ.) Before Firefox 50, setting the | 12.1 | 6 | 25 | 50 Версия 50 выпущена в 2016 г. Версия 31 выпущена в 2014 г. — Удалено в 50; Частичная поддержка Примечание MDN (англ.) Before Firefox for Android 50, setting the | 14 | 6 | 1.5 | 4.4 | 6 |
srclang | 23 | 12 | 31 | 12.1 | 6 | 25 | 31 | 14 | 6 | 1.5 | 4.4 | 6 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
default |
default |
Указывает, что данная дорожка должна быть включена по умолчанию. |
kind |
captions
|
Определяет вид текстовой дорожки. |
label |
text |
Указывает заголовок текста дорожки. |
src |
URL |
Указывает URL файла дорожки. Является обязательным атрибутом. |
srclang |
language_code |
Указывает язык текста дорожки ( требуется, если kind = "subtitles" ). |
Примеры, попробуйте сами
Запустите локальное видео и выберите дорожку субтитров. Для своего документа сохраните видео и файлы субтитров рядом с HTML.
<video controls width="320" height="240"><source src="sample.mp4" type="video/mp4"><track src="ru.vtt" kind="subtitles" srclang="ru" label="Русский" default><track src="en.vtt" kind="subtitles" srclang="en" label="English">Ваш браузер не поддерживает video.</video>Видео · Русские субтитры · Английские субтитры
Значение CSS по умолчанию
Нет.Поддержка глобальных атрибутов
Элемент поддерживает "глобальные атрибуты".
Атрибуты событий
Элемент поддерживает "атрибуты событий".