--- title: '<track>: Встраиваемая текстовая дорожка' slug: Web/HTML/Element/track tags: - Element - HTML - HTML embedded content - HTML5 - Multimedia - Reference - TextTrack - Web - Веб - Справка - Элемент translation_of: Web/HTML/Element/track --- <div>{{HTMLRef}}</div> <p><strong>HTML-элемент <code><track></code> </strong> используется как дочерний элемент медиа-элементов {{HTMLElement("audio")}} and {{HTMLElement("video")}}. Позволяет указать синхронизированные текстовые дорожки (или данные на основе времени), например, для автоматической обработки субтитров. Файлы треков используют <a href="/ru/docs/Web/API/WebVTT_API">формат WebVTT</a> (<code>.vtt</code> файлы) — Web Video Text Tracks или <a href="https://w3c.github.io/ttml2/index.html">Timed Text Markup Language (TTML).</a></p> <div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div> <p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> <table class="properties"> <tbody> <tr> <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> <td>Нет</td> </tr> <tr> <th scope="row">Разрешённое содержимое</th> <td>Нет, это {{Glossary("empty element", "пустой элемент")}}.</td> </tr> <tr> <th scope="row">Пропуск тегов</th> <td>Так как это пустой элемент, то открывающий тег обязателен, закрывающего не должно быть.</td> </tr> <tr> <th scope="row">Неявная ARIA-роль</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td> </tr> <tr> <th scope="row">Разрешённые родители</th> <td>Медиа элемент, перед любым <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9F%D0%BE%D1%82%D0%BE%D0%BA%D0%BE%D0%B2%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82">потоковым контентом</a>.</td> </tr> <tr> <th scope="row">Разрешённые ARIA-роли</th> <td>Нет</td> </tr> <tr> <th scope="row">DOM интерфейс</th> <td>{{domxref("HTMLTrackElement")}}</td> </tr> </tbody> </table> <h2 id="Атрибуты">Атрибуты</h2> <p>Этот элемент использует <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> <dl> <dt>{{htmlattrdef("default")}}</dt> <dd>Этот атрибут указывает, что дорожка должна быть включена, если пользовательские настройки не указывают, что другая дорожка является более подходящей. Может использоваться только для одного элемента <code>track</code> в элементе мультимедиа.</dd> <dt>{{htmlattrdef("kind")}}</dt> <dd>Как текстовый трек должен быть использован. Если значение опущено, тип по умолчанию — <code>subtitles</code> (субтитры). Если атрибут отсутствует, будет использоваться <code>subtitles</code>. Если атрибут содержит недопустимое значение, оно принимает значение <code>metadata</code>. (Версии Chrome ранее 52 рассматривали недопустимое значение как <code>subtitles</code>.) Допускаются следующие ключевые слова: <ul> <li><code>subtitles</code> <ul> <li>Субтитры обеспечивают перевод контента, который не может быть понят зрителем. Например, диалог или текст, который не является английским, в фильме на английском языке.</li> <li>Субтитры могут содержать дополнительный контент, обычно дополнительную справочную информацию. Например, текст в начале фильмов «Звездных войн» или дата, время и место действия сцены.</li> </ul> </li> <li><code>captions</code> <ul> <li>Подписи обеспечивают транскрипцию и, возможно, перевод аудио.</li> <li>Подписи могут включать важную невербальную информацию, такую как музыкальные сигналы или звуковые эффекты. Возможно указывать источник сигналов (например, музыка, текст, персонаж).</li> <li>Подходит для пользователей со слабым слухом или когда звук отключен.</li> </ul> </li> <li><code>descriptions</code> <ul> <li>Текстовое описание видеоконтента.</li> <li>Подходит для слепых пользователей или там, где видео не видно.</li> </ul> </li> <li><code>chapters</code> <ul> <li>Названия глав предназначены для использования при навигации по медиа-ресурсу.</li> </ul> </li> <li><code>metadata</code> <ul> <li>Данные, используемые скриптами. Не видны пользователю.</li> </ul> </li> </ul> </dd> <dt>{{htmlattrdef("label")}}</dt> <dd>Видимый пользователю заголовок текстовой дорожки, который используется браузером при выводе списка доступных текстовых дорожек.</dd> <dt>{{htmlattrdef("src")}}</dt> <dd>Адрес файла текстовой дорожки (<code>.vtt</code> файл). Должен быть действительным URL. Этот атрибут должен быть указан, а его значение URL должно иметь то же происхождение, что и документ — исключая случаи, когда родительский {{HTMLElement("audio")}} или {{HTMLElement("video")}} данного <code>track</code> элемента имеет атрибут <code><a href="/ru/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code>.</dd> <dt>{{htmlattrdef("srclang")}}</dt> <dd>Язык текстовых данных трека. Это должен быть валидный <a href="https://r12a.github.io/app-subtags/">BCP 47</a> языковой тег (см. также <a href="https://www.w3.org/International/articles/language-tags/">языковые тэги в HTML и XML)</a>. Если для атрибута <code>kind</code> установлено значение <code>subtitles</code>, должен быть определён атрибут <code>srclang</code>.</dd> </dl> <h2 id="Примечания_по_использованию">Примечания по использованию</h2> <h3 id="Типы_данных_дорожки">Типы данных дорожки</h3> <p>Тип данных, которые трек добавляет на носитель, задается в атрибуте <code>kind</code>, который может принимать значения <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> или <code>metadata</code>. Элемент указывает на исходный файл, содержащий синхронизированный по времени текст, который браузер предоставляет, когда пользователь запрашивает дополнительные данные.</p> <p>Отдельный <code>media</code> элемент не может иметь элементы <code>track</code> с одинаковыми значениями <code>kind</code>, <code>srclang</code> и <code>label</code>.</p> <h3 id="Обнаружение_изменений_сигнала">Обнаружение изменений сигнала</h3> <p>{{page("/ru/docs/Web/API/TextTrack/cuechange_event", "On the track element")}}</p> <h2 id="Пример">Пример</h2> <pre class="brush: html notranslate"><video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="sampleCaptions.vtt" srclang="en"> <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en"> <track kind="chapters" src="sampleChapters.vtt" srclang="en"> <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"> <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"> <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"> <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"> <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1"> <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2"> <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3"> <!-- Fallback --> ... </video> </pre> <h2 id="Спецификации">Спецификации</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> <td></td> </tr> <tr> <td>{{SpecName("HTML5 W3C", "semantics-embedded-content.html#the-track-element", "track element")}}</td> <td>{{Spec2("HTML5 W3C")}}</td> <td>Initial definition</td> </tr> </tbody> </table> <h2 id="Поддержка_браузерами">Поддержка браузерами</h2> <p>{{Compat("html.elements.track")}}</p> <h2 id="Смотри_также">Смотри также</h2> <ul> <li><a href="/ru/docs/Web/API/WebVTT_API">WebVTT — формат файлов текстовой дорожки</a></li> <li>{{domxref("HTMLMediaElement.textTracks")}}</li> </ul>