Основний вміст

  • <body>

Тег <track>

Тег track в HTML: Приклади та Опис

Тег track дозволяє авторам вказувати текстову доріжку для медійних елементів <audio> та <video>. Ця доріжка зазвичай містить субтитри на різних мовах, коментарі, заголовки та інше.

Синтаксис

<audio>
  <track kind | src | srclang | label | default>
</audio>

<video>
  <track kind | src | srclang | label | default>
</video>

Атрибути

kind
Вказує тип доріжки. Можливі варіанти перераховані в таблиці 1.
src
Шлях до файлу з доріжкою.
srclang
Мова доріжки. Див. коди мов.
label
Назва доріжки, яка відображатиметься. Якщо цей атрибут не вказаний, браузер використовуватиме значення за замовчуванням, наприклад, "untitled1".
default
Наявність цього атрибута вказує, що ця доріжка є переважною і повинна бути вибрана за замовчуванням. Тільки одна доріжка може мати атрибут default.

Закриваючий тег

Не потрібен.

Приклад 1

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>track</title>
 </head>
 <body>
  <video width="500" height="400" controls>
    <source src="video/jane.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="video/jane.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="video/jane.webm" type='video/webm; codecs="vp8, vorbis"'>
    <track kind="subtitles" src="video/jane.en.srt" srclang="en" label="English">
    <track kind="subtitles" src="video/jane.ua.srt" srclang="uk" label="Український">
    <track kind="subtitles" src="video/jane.ru.srt" srclang="ru" label="Русский">
     Тег video не підтримується вашим браузером.
  </video>
 </body>
</html>

Найкращу підтримку показує браузер IE, який дозволяє перемикати мову субтитрів та коректно їх відображати.

Часті запитання

  • Q: Як використовувати тег <track> для відео в HTML?

    A: З тегом <track> можна вказати текстовий шлях до субтитрів або текстової доріжки для відео. Приклад: <track src='subtitles_en.vtt' kind='subtitles' srclang='en' label='English Subtitles'>

  • Q: Які атрибути підтримує тег <track>?

    A: Деякі з підтримуваних атрибутів тегу <track>: src, srclang, label, default, kind.

  • Q: Як вказати, що субтитри з тегом <track> є за замовчуванням?

    A: Додайте атрибут default до тегу <track>. Наприклад: <track src='subtitles_en.vtt' default>

  • Q: Чи можна використовувати тег <track> для аудіо елементів?

    A: Тег <track> призначений для текстових доріжок відео та не підтримується для аудіо елементів.

  • Q: Як правильно вказати мову субтитрів з тегом <track>?

    A: Використовуйте атрибут srclang для вказання мови субтитрів. Наприклад: <track src='subtitles_en.vtt' srclang='en'>