Poznaj Programowanie

Tagi HTML: track

Piotr Grochal 6 min. czytania

Element <track> to kluczowy znacznik HTML5, który umożliwia dołączanie tekstowych ścieżek do elementów multimedialnych takich jak <audio> i <video>. Pozwala na implementację napisów (subtitles), podpisów dla niesłyszących (captions), opisów audio (descriptions), rozdziałów (chapters) oraz metadanych (metadata), co znacząco poprawia dostępność i doświadczenie użytkownika.

W świecie, w którym treści wideo i audio dominują w internecie, <track> staje się nieodzownym narzędziem dla frontendowców – bez wtyczek, prosto w HTML. Ten przewodnik przeprowadzi Cię przez składnię, atrybuty, przykłady kodu oraz praktyczne wskazówki i kompatybilność przeglądarek.

Czym dokładnie jest element <track> i do czego służy?

<track> to element pusty (samozamykający), który musi być umieszczony jako dziecko elementów <audio> lub <video>, zawsze przed ich ogólną treścią (fallbackiem). Wskazuje zewnętrzne pliki w formacie WebVTT (rozszerzenie .vtt), które są precyzyjnie synchronizowane z odtwarzaniem.

Główne zastosowania:

  • Napisy (subtitles) – tłumaczenia dialogów dla użytkowników nieznających języka oryginalnego;
  • Podpisy (captions) – pełny opis dialogów, efektów dźwiękowych i muzyki – idealne dla osób niesłyszących;
  • Opisy (descriptions) – tekstowe opisy wizualnych elementów, odczytywane przez syntezatory mowy;
  • Rozdziały (chapters) – punkty nawigacyjne, podobne do menu DVD;
  • Metadane (metadata) – dane dla skryptów JavaScript, niewidoczne dla użytkownika.

Element jest częścią specyfikacji HTML5 i w DOM reprezentowany przez interfejs HTMLTrackElement.

Atrybuty elementu <track>

Element <track> ma jeden atrybut obowiązkowy oraz kilka opcjonalnych, a także wspiera globalne atrybuty HTML (np. id, class, title):

Atrybuty obowiązkowe

Poniżej znajdziesz atrybut, bez którego <track> nie zadziała:

Atrybut Wartość Opis
src URL Obowiązkowy – ścieżka do pliku .vtt. Jeśli kind="subtitles", wymagany jest też srclang.

Atrybuty opcjonalne

Te atrybuty rozszerzają funkcjonalność i kontrolę nad ścieżkami tekstowymi:

Atrybut Wartość Opis
default default Ustawia ścieżkę jako domyślną, jeśli preferencje użytkownika nie wskazują innej.
kind captions, chapters, descriptions, metadata, subtitles Określa typ ścieżki (domyślnie subtitles).
label tekst Etykieta widoczna w menu przeglądarki (np. „Polski”).
srclang kod języka (np. pl, en) Język ścieżki (wymagany dla kind="subtitles").

Praktyczne przykłady użycia <track>

Zacznijmy od prostego przykładu pliku .vtt – jego zawartość powinna wyglądać następująco:

WEBVTT

00:00:01.000 --> 00:00:04.000
Witaj w tutorialu HTML5!

00:00:05.000 --> 00:00:08.000
Dziś omawiamy element track.

Przykład 1 – podstawowe napisy do wideo

Tak włączysz napisy w dwóch językach bezpośrednio w HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład track</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="film.mp4" type="video/mp4">
<track kind="subtitles" src="napisy.pl.vtt" srclang="pl" label="Polski" default>
<track kind="subtitles" src="napisy.en.vtt" srclang="en" label="English">
Twoja przeglądarka nie obsługuje wideo.
</video>
</body>
</html>

Pierwsza ścieżka jest domyślna dzięki atrybutowi default, a przeglądarka wyświetli w menu wybór „Polski” i „English”.

Przykład 2 – wiele ścieżek: napisy, podpisy i rozdziały

Możesz dodać różne rodzaje ścieżek (w tym rozdziały i opisy audio):

<video controls>
<source src="podcast.mp4" type="video/mp4">
<!-- Napisy -->
<track kind="subtitles" src="subs.pl.vtt" srclang="pl" label="Napisy PL" default>
<!-- Podpisy dla niesłyszących -->
<track kind="captions" src="captions.en.vtt" srclang="en" label="Captions EN">
<!-- Rozdziały -->
<track kind="chapters" src="chapters.vtt" srclang="pl" label="Rozdziały">
<!-- Opisy audio -->
<track kind="descriptions" src="descriptions.pl.vtt" srclang="pl" label="Opisy audio">
</video>

Dla audio działa to podobnie – oto przykład użycia rozdziałów:

<audio controls>
<source src="muzyka.ogg" type="audio/ogg">
<track kind="chapters" src="rozdziely.vtt" srclang="pl" default>
</audio>

Przykład 3 – integracja z JavaScript

Możesz dynamicznie tworzyć i sterować ścieżkami przez DOM:

const video = document.querySelector('video');
const track = video.addTextTrack('subtitles', 'Dynamiczne napisy', 'pl');
track.mode = 'showing'; // włącza ścieżkę
// Dodaj cues ręcznie
const cue = new VTTCue(0, 5, 'Witaj z JS!');
track.addCue(cue);

Taka integracja pozwala budować zaawansowane funkcje – np. generować napisy z API w locie lub personalizować treści.

Obsługa przeglądarkowa – rzeczywistość vs. ideał

Nowoczesne przeglądarki szeroko obsługują <track> i format WebVTT. Poniższa tabela podsumowuje ogólny stan wsparcia:

Przeglądarka Wsparcie <track> Uwagi
Chrome Tak Pełna obsługa napisów i większości typów ścieżek.
Firefox Tak Dobre wsparcie WebVTT i menu wyboru ścieżek.
Safari Tak Obsługa <track>; testuj szczegóły renderingu.
Edge Tak Dziedziczy wsparcie z Chromium.
Opera Tak Podobnie jak Chrome (silnik Blink).
Internet Explorer Nie Przestarzała przeglądarka; wymagane obejścia/polyfill.

Jeśli celujesz w starsze środowiska lub niestandardowe strumienie, rozważ biblioteki/polyfille (np. video.js, @videojs/http-streaming) i zawsze testuj w wielu przeglądarkach.

Tworzenie plików WebVTT – krok po kroku

Struktura pliku .vtt jest prosta i czytelna:

  1. Nagłówek: WEBVTT
  2. Czas: HH:MM:SS.mmm --> HH:MM:SS.mmm
  3. Treść: tekst napisu.

Przykład pełnego pliku rozdziely.vtt (z notatką i dwoma rozdziałami):

WEBVTT
NOTE Rozdziały podcastu

00:00:00.000 --> 00:01:00.000
Wstęp

00:01:00.000 --> 00:05:00.000
Główna treść

Do wygodnej edycji możesz użyć narzędzi typu Aegisub lub edytora kodu z podświetlaniem składni.

Najlepsze praktyki i pułapki

Stosuj poniższe wskazówki, aby zapewnić świetne UX i dostępność:

  • Wielojęzyczność – zawsze podawaj srclang i czytelny label dla menu wyboru;
  • Dostępność – używaj default dla głównego języka i testuj z czytnikami ekranu (NVDA, VoiceOver);
  • Fallback – dodaj treść tekstową wewnątrz <video>/<audio> dla starszych przeglądarek;
  • Wydajność i CORS – hostuj pliki .vtt na tym samym serwerze lub poprawnie skonfiguruj nagłówki;
  • Polyfille – gdy wspierasz stare przeglądarki, rozważ video.js lub webvtt.js;
  • SEO – napisy wspierają indeksowanie treści wideo przez wyszukiwarki.

Błędy do uniknięcia:

  • brak src – element nie działa,
  • nieprawidłowy format czasu w VTT – napisy nie synchronizują się,
  • umieszczenie <track> poza <video>/<audio> – zostanie zignorowane.