<track>: встраиваемая текстовая дорожка

В процессе перевода.

HTML элемент <track>  используется как дочерний элемент медиа-элементов <audio> and <video>. Позволяет указать синхронизированные текстовые дорожки (или данные на основе времени), например, для автоматической обработки субтитров. Файлы треков используют формат WebVTT (.vtt файлы) — Web Video Text Tracks или Timed Text Markup Language (TTML).

Категории содержимого Нет
Разрешенное содержимое Нет, это пустой элемент.
Пропускаемые теги Открывающий тег обязателен, закрывающего не должно быть.
Допустимые родительские элементы Медиа элемент, перед любым потоковым контентом.
Разрешенные роли ARIA Нет
DOM интерфейс HTMLTrackElement

Атрибуты

Этот элемент использует глобальные атрибуты.

default
Этот атрибут указывает, что дорожка должна быть включена, если пользовательские настройки не указывают, что другая дорожка является более подходящей. Mожет использоваться только для одного элемента track в элементе мультимедиа.
kind
Как текстовый трек должен быть использован. Если значение опущено, тип по умолчанию —  subtitles (субтитры). Если атрибут отсутствует, будет использоваться subtitles. Если атрибут содержит недопустимое значение, оно принимает значение metadata. (Версии Chrome ранее 52 рассматривали недопустимое значение как subtitles.) Допускаются следующие ключевые слова:
  • subtitles
    • Субтитры обеспечивают перевод контента, который не может быть понят зрителем. Например, диалог или текст, который не является английским, в фильме на английском языке.
    • Субтитры могут содержать дополнительный контент, обычно дополнительную справочную информацию. Например, текст в начале фильмов «Звездных войн» или дата, время и место действия сцены.
  • captions
    • Подписи обеспечивают транскрипцию и, возможно, перевод аудио.
    • Подписи могут включать важную невербальную информацию, такую ​​как музыкальные сигналы или звуковые эффекты. Возможно, указывать источник сигналов (например, музыка, текст, персонаж).
    • Подходит для пользователей со слабым слухом или когда звук отключен.
  • descriptions
    • Текстовое описание видеоконтента.
    • Подходит для слепых пользователей или там, где видео не видно.
  • chapters
    • Названия глав предназначены для использования при навигации по медиа-ресурсу.
  • metadata
    • Данные, используемые скриптами. Не видны пользователю.
label
Пользовательский заголовок текстовой дорожки, который используется браузером при выводе списка доступных текстовых дорожек.
src
Адрес файла текстовой дорожки (.vtt). Должен быть действительный URL. Этот атрибут должен быть указан, а его значение URL должно иметь то же происхождение, что и документ — исключая случаи, когда родительский <audio> или <video> данного track-элемента имеет атрибут crossorigin.
srclang
Язык текстовых данных трека. Это должен быть валидный BCP 47 языковой тег (см. также Языковые тэги в HTML и XML). Если для атрибута kind установлено значение subtitles, необходимо определить атрибут srclang.

Примечания по использованию

Тип данных, которые трек добавляет на носитель, задается в атрибуте kind, который может принимать значения subtitles, captions, descriptions, chapters или metadata. Элемент указывает на исходный файл, содержащий синхронизированный текст, который браузер предоставляет, когда пользователь запрашивает дополнительные данные.

Отдельный media элемент не может иметь элементы track с одинаковыми  значениями kind, srclang и label.

Пример

<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>

Спецификации

Specification Status Comment
HTML Living Standard
Определение 'track element' в этой спецификации.		 Живой стандарт
HTML5
Определение 'track element' в этой спецификации.		 Рекомендация Initial definition

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
trackChrome Полная поддержка 23Edge Полная поддержка 12Firefox Полная поддержка 31
Полная поддержка 31
Нет поддержки 24 — 50
Отключено
Отключено From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка 6WebView Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Doesn't work for fullscreen video.
Chrome Android Полная поддержка 25
Замечания
Полная поддержка 25
Замечания
Замечания Doesn't work for fullscreen video.
Firefox Android Полная поддержка 31
Полная поддержка 31
Нет поддержки 24 — 50
Отключено
Отключено From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Полная поддержка 6Samsung Internet Android Полная поддержка 1.5
Замечания
Полная поддержка 1.5
Замечания
Замечания Doesn't work for fullscreen video.
defaultChrome Полная поддержка 23Edge Полная поддержка 12Firefox Полная поддержка 31
Полная поддержка 31
Нет поддержки 24 — 50
Отключено
Отключено From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка 6WebView Android Полная поддержка 4.4Chrome Android Полная поддержка 25Firefox Android Полная поддержка 31
Полная поддержка 31
Нет поддержки 24 — 50
Отключено
Отключено From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка 1.5
kindChrome Полная поддержка 23Edge Полная поддержка 12Firefox Полная поддержка 31
Полная поддержка 31
Нет поддержки 24 — 50
Отключено
Отключено From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка 6WebView Android Полная поддержка 4.4Chrome Android Полная поддержка 25Firefox Android Полная поддержка 31
Полная поддержка 31
Нет поддержки 24 — 50
Отключено
Отключено From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка 1.5
labelChrome Полная поддержка 23Edge Полная поддержка 12Firefox Полная поддержка 31
Полная поддержка 31
Нет поддержки 24 — 50
Отключено
Отключено From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка 6WebView Android Полная поддержка 4.4Chrome Android Полная поддержка 25Firefox Android Полная поддержка 31
Полная поддержка 31
Нет поддержки 24 — 50
Отключено
Отключено From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка 1.5
srcChrome Полная поддержка 23Edge Полная поддержка 12Firefox Полная поддержка 31
Полная поддержка 31
Нет поддержки 24 — 50
Отключено
Отключено From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка 6WebView Android Полная поддержка 4.4Chrome Android Полная поддержка 25Firefox Android Полная поддержка 31
Полная поддержка 31
Нет поддержки 24 — 50
Отключено
Отключено From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка 1.5
srclangChrome Полная поддержка 23Edge Полная поддержка 12Firefox Полная поддержка 31
Полная поддержка 31
Нет поддержки 24 — 50
Отключено
Отключено From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка 6WebView Android Полная поддержка 4.4Chrome Android Полная поддержка 25Firefox Android Полная поддержка 31
Полная поддержка 31
Нет поддержки 24 — 50
Отключено
Отключено From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка 1.5

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

Смотрите также

Связанные темы
  1. <track>
  2. HTML элементы
    1. A
      1. <a>
      2. <abbr>
      3. <acronym>
      4. <address>
      5. <applet>
      6. <area>
      7. <article>
      8. <aside>
      9. <audio>
    2. B
      1. <b>
      2. <base>
      3. <basefont>
      4. <bdi>
      5. <bdo>
      6. <bgsound>
      7. <big>
      8. <blink>
      9. <blockquote>
      10. <body>
      11. <br>
      12. <button>
    3. C
      1. <canvas>
      2. <caption>
      3. <center>
      4. <cite>
      5. <code>
      6. <col>
      7. <colgroup>
      8. <content>
    4. D
      1. <data>
      2. <datalist>
      3. <dd>
      4. <del>
      5. <details>
      6. <dfn>
      7. <dialog>
      8. <dir>
      9. <div>
      10. <dl>
      11. <dt>
    5. E
      1. <em>
      2. <embed>
    6. F
      1. <fieldset>
      2. <figcaption>
      3. <figure>
      4. <font>
      5. <footer>
      6. <form>
      7. <frame>
      8. <frameset>
    7. G H
      1. <h1>
      2. <h2>
      3. <h3>
      4. <h4>
      5. <h5>
      6. <h6>
      7. <head>
      8. <header>
      9. <hgroup>
      10. <hr>
      11. <html>
    8. I
      1. <i>
      2. <iframe>
      3. <img>
      4. <input>
      5. <ins>
      6. <isindex>
    9. J K
      1. <kbd>
      2. <keygen>
    10. L
      1. <label>
      2. <legend>
      3. <li>
      4. <link>
      5. <listing>
    11. M
      1. <main>
      2. <map>
      3. <mark>
      4. <marquee>
      5. <menu>
      6. <menuitem>
      7. <meta>
      8. <meter>
    12. N
      1. <nav>
      2. <nobr>
      3. <noframes>
      4. <noscript>
    13. O
      1. <object>
      2. <ol>
      3. <optgroup>
      4. <option>
      5. <output>
    14. P
      1. <p>
      2. <param>
      3. <picture>
      4. <plaintext>
      5. <pre>
      6. <progress>
    15. Q
      1. <q>
    16. R
      1. <rp>
      2. <rt>
      3. <rtc>
      4. <ruby>
    17. S
      1. <s>
      2. <samp>
      3. <script>
      4. <section>
      5. <select>
      6. <shadow>
      7. <slot>
      8. <small>
      9. <source>
      10. <spacer>
      11. <span>
      12. <strike>
      13. <strong>
      14. <style>
      15. <sub>
      16. <summary>
      17. <sup>
    18. T
      1. <table>
      2. <tbody>
      3. <td>
      4. <template>
      5. <textarea>
      6. <tfoot>
      7. <th>
      8. <thead>
      9. <time>
      10. <title>
      11. <tr>
      12. <track>
      13. <tt>
    19. U
      1. <u>
      2. <ul>
    20. V
      1. <var>
      2. <video>
    21. W
      1. <wbr>
    22. X Y Z
      1. <xmp>