diff options
Diffstat (limited to 'files/ru/web/html/element/track/index.html')
| -rw-r--r-- | files/ru/web/html/element/track/index.html | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/files/ru/web/html/element/track/index.html b/files/ru/web/html/element/track/index.html new file mode 100644 index 0000000000..d9d7f801d6 --- /dev/null +++ b/files/ru/web/html/element/track/index.html @@ -0,0 +1,179 @@ +--- +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> |