path: root/files/ru/web/html/element/track/index.html

---
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>&lt;track&gt;</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">&lt;video controls poster="/images/sample.gif"&gt;
   &lt;source src="sample.mp4" type="video/mp4"&gt;
   &lt;source src="sample.ogv" type="video/ogv"&gt;
   &lt;track kind="captions" src="sampleCaptions.vtt" srclang="en"&gt;
   &lt;track kind="descriptions"
     src="sampleDescriptions.vtt" srclang="en"&gt;
   &lt;track kind="chapters" src="sampleChapters.vtt" srclang="en"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"&gt;
   &lt;track kind="metadata" src="keyStage1.vtt" srclang="en"
     label="Key Stage 1"&gt;
   &lt;track kind="metadata" src="keyStage2.vtt" srclang="en"
     label="Key Stage 2"&gt;
   &lt;track kind="metadata" src="keyStage3.vtt" srclang="en"
     label="Key Stage 3"&gt;
   &lt;!-- Fallback --&gt;
   ...
&lt;/video&gt;
</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>