/html/track:> Текстовая дорожка_
Элемент track
Синтаксис
HTML
<[audio | video]> ... <track src="..."> ... </[audio | video]>
Описание
Элемент track
(от англ. "track" ‒ «трек, дорожка») прикрепляет файл текстовой дорожки (субтитры, комментарии) к элементам video
и audio
. В подобном файле прописывается текст на одном языке (русском, английском, французском и т.д.) и каждому отрывку этого текста устанавливается свой временной отрезок вывода на экран. Количество файлов зависит от того количества языков текстового сопровождения, которое вы хотите установить для определённого мультимедиа элемента.
Примечание
Использование данного элемента особенно актуально для перевода видео на русский и остальные языки, а так же использование для дублирования звуковой информации для людей с проблемами слуха.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Android
Спецификация
Верс. | Раздел |
---|---|
HTML | |
2.0 | |
3.2 | |
4.01 | |
5.0 | 4.7.9 The track element |
5.1 | 4.7.13. The track element |
XHTML | |
1.0 | |
1.1 |
Атрибуты
- default
- Указывает приоритетную дорожку, воспроизводимую по умолчанию.
- kind
- Указывает тип дорожки.
- label
- Задаёт заголовок/название к тексту дорожки.
- src
- Указывает URL-адрес файла с субтитрами.
- srclang
- Указывает язык текста дорожки (если «
kind="subtitles"
»). - Глобальные атрибуты
- accesskey, class, contenteditable, data-*, dir, draggable, dropzone, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Элемент track</title>
</head>
<body>
<h1>Пример использования элемента "track"</h1>
<video style="width: 500px; height: 375px;" controls>
<source src="/examples/multimedia/video/Angels.mp4" type="video/mp4">
<source src="/examples/multimedia/video/Angels.ogg" type="video/ogg">
<source src="/examples/multimedia/video/Angels.webm" type="video/webm">
<track kind="subtitles" src="angels.ru.vtt" srclang="ru" label="Русский">
<track kind="subtitles" src="angels.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="angels.fr.vtt" srclang="fr" lang="fr" label="Francais">
<track kind="subtitles" src="angels.de.vtt" srclang="de" lang="de" label="Deutsch">
<p>Ваш веб-браузер не поддерживает элемент "video".</p>
</video>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Элемент track</title>
</head>
<body>
<h1>Пример использования элемента "track"</h1>
<video style="width: 500px; height: 375px;" controls>
<source src="/examples/multimedia/video/Angels.mp4" type="video/mp4">
<source src="/examples/multimedia/video/Angels.ogg" type="video/ogg">
<source src="/examples/multimedia/video/Angels.webm" type="video/webm">
<track kind="subtitles" src="angels.ru.vtt" srclang="ru" label="Русский">
<track kind="subtitles" src="angels.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="angels.fr.vtt" srclang="fr" lang="fr" label="Francais">
<track kind="subtitles" src="angels.de.vtt" srclang="de" lang="de" label="Deutsch">
<p>Ваш веб-браузер не поддерживает элемент "video".</p>
</video>
</body>
</html>
Элемент track