HTML-тег <track>

HTML-тег <track> используется для указания текстовых дорожек для элементов <video> и <audio> . Он предоставляет подписи, субтитры, описания и метаданные для улучшения доступности и удобства использования мультимедийного контента. Тег <track> не имеет закрывающего тега и является самозакрывающимся элементом.

Тег <track> обычно используется для предоставления субтитров к видео, делая их доступными для глухих или слабослышащих пользователей, а также для поддержки переводов на другие языки.

Базовый синтаксис HTML-тега <track>

Основной синтаксис тега <track> следующий: 

<track src="file.vtt" kind="subtitles" srclang="en" label="English Subtitles">

Атрибуты тега <track> определяют тип текстовой дорожки и способ ее отображения для пользователя.

Атрибуты HTML-тега <track>

  • src: Указывает URL-адрес файла трека(например, формат .vtt ).
  • kind: Указывает тип трека. Возможные значения: <ul class="wp-block-list">
  • subtitles : Субтитры для видео.
  • captions : Субтитры для слабослышащих.
  • descriptions : Описания содержимого.
  • chapters : Точки навигации в медиа.
  • metadata : Метаданные трека.
  • srclang: Указывает язык трека(например, en для английского).
  • label: дает удобное для пользователя название треку.
  • по умолчанию: указывает, что трек является треком по умолчанию, если доступно несколько треков.

    • Пример субтитров для видео

    В следующем примере показано, как использовать тег <track> для добавления английских субтитров к видео: 

    <!DOCTYPE html>
<html>
    <body>
        <h2>Video with Subtitles</h2>
        <video controls width="600">
            <source src="example.mp4" type="video/mp4">
            <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English Subtitles" default>
            Your browser does not support the video tag.
        </video>
    </body>
</html>

    Пояснение: Элемент <track> добавляет английские субтитры из файла subtitles-en.vtt и устанавливается в качестве дорожки по умолчанию.

    Пример с несколькими дорожками

    Вы можете включить несколько элементов <track> для разных языков или типов треков: 

    <!DOCTYPE html>
<html>
    <body>
        <h2>Video with Multiple Tracks</h2>
        <video controls width="600">
            <source src="example.mp4" type="video/mp4">
            <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English Subtitles" default>
            <track src="subtitles-es.vtt" kind="subtitles" srclang="es" label="Spanish Subtitles">
            Your browser does not support the video tag.
        </video>
    </body>
</html>

    Пояснение: В этом примере субтитры присутствуют на английском и испанском языках. Английская дорожка установлена по умолчанию.

    Стиль и использование подписей

    По умолчанию элементы управления браузера отображают субтитры. Однако вы также можете стилизовать и управлять дорожками с помощью JavaScript. 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            video::-webkit-media-text-track-display {
                background: rgba(0, 0, 0, 0.7);
                color: #fff;
                font-size: 16px;
                padding: 4px;
            }
        </style>
    </head>
    <body>
        <h2>Styled Captions</h2>
        <video controls width="600">
            <source src="example.mp4" type="video/mp4">
            <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English Subtitles" default>
            Your browser does not support the video tag.
        </video>
    </body>
</html>

    Пояснение: стили CSS настраивают внешний вид подписей, добавляя полупрозрачный фон и белый текст.

    Практическое применение тега <track>

    • Субтитры: Предоставьте субтитры на разных языках для видео.
    • Субтитры: Для удобства, особенно для людей с нарушениями слуха, используйте субтитры.
    • Описания: добавьте описательные дорожки для пользователей с нарушениями зрения, чтобы они могли лучше понять видеоконтент.
    • Метаданные: используйте дорожки метаданных для включения дополнительной информации или контекста о видео.
    • Навигация по главам: используйте маркеры глав для удобной навигации по длинным видео.