Co to jest `track` w HTML?

Element <track> w HTML służy do dodawania dodatkowych ścieżek tekstowych (takich jak napisy, tłumaczenia, podpisy czy opisy audio) do elementów multimedialnych, głównie do <video> i <audio>. Jest on niezbędny, by zapewnić lepszą dostępność i wsparcie dla różnych użytkowników — na przykład osoby niesłyszące lub korzystające z innego języka niż podstawowy język materiału wideo.

Podstawowa składnia elementu <track>

<video src="film.mp4" controls>
    <track kind="subtitles" src="napisy-pl.vtt" srclang="pl" label="Polski" default>
</video>

Najważniejsze atrybuty elementu <track>

• kind – definiuje typ ścieżki tekstowej;
• subtitles – napisy tłumaczące dialogi;
• captions – napisy zawierające wszystkie dźwięki (przydatne dla niesłyszących);
• descriptions – ścieżki z opisem wizualnym dla niewidomych;
• chapters – ścieżki rozdziałów pomocnych w nawigowaniu po materiale;
• metadata – dowolne dane, niewidoczne bezpośrednio dla użytkownika;
• src – ścieżka do pliku tekstowego z napisami (najczęściej w formacie WebVTT);
• srclang – język ścieżki tekstowej (np. pl dla języka polskiego);
• label – czytelna nazwa języka/ścieżki widoczna podczas wyboru przez użytkownika;
• default – oznacza domyślną ścieżkę, która ma być automatycznie wybrana, gdy preferencje użytkownika nie pasują do innych ścieżek.

Praktyczne przykłady zastosowań

Napisy w wielu językach

<video src="film.mp4" controls>
    <track kind="subtitles" src="napisy-en.vtt" srclang="en" label="English">
    <track kind="subtitles" src="napisy-pl.vtt" srclang="pl" label="Polski" default>
    <track kind="subtitles" src="napisy-de.vtt" srclang="de" label="Deutsch">
</video>

W powyższym przykładzie użytkownik może wybrać język napisów, a jeśli nie wskaże preferencji, domyślnie wyświetlą się napisy po polsku dzięki atrybutowi default.

Podpisy dla niesłyszących (captions)

<video src="lekcja.mp4" controls>
    <track kind="captions" src="captions-en.vtt" srclang="en" label="English for the Hard of Hearing" default>
</video>

Napisy te oprócz dialogów zawierają opis dźwięków, muzyki i inne informacje niewerbalne.

Rozdziały (chapters)

<video src="tutorial.mp4" controls>
    <track kind="chapters" src="rozdzialy.vtt" srclang="pl" label="Rozdziały">
</video>

Dzięki kind="chapters" widz może przeskakiwać między zdefiniowanymi fragmentami materiału, jeśli odtwarzacz obsługuje tę funkcję.

Format pliku do <track>

Najczęściej wykorzystywanym formatem jest WebVTT (Web Video Text Tracks), który ma prostą składnię:

00:00:01.000 --> 00:00:05.000
Pierwsza linia napisów.

00:00:06.000 --> 00:00:09.000
Druga linia napisów.

Dobre praktyki

• Dla każdego języka i rodzaju napisów warto dodawać osobny element <track>,
• używaj atrybutu srclang, aby przeglądarka poprawnie wyświetlała dostępne napisy i wybieranie ich było wygodne dla odbiorców,
• zawsze oznaczaj domyślne napisy atrybutem default, szczególnie jeśli dostępnych jest więcej niż jedna opcja.

Dostępność i wsparcie przeglądarek

Element <track> jest obsługiwany w większości współczesnych przeglądarek oraz przez nowoczesne odtwarzacze wideo. Używanie tego elementu jest obecnie rekomendowanym sposobem zwiększania dostępności treści wideo, także ze względu na wymogi prawne dotyczące dostępności stron internetowych.

Podsumowanie –
Tag <track> umożliwia wygodne dodawanie, wybieranie oraz zarządzanie ścieżkami napisów, podpisów, rozdziałów czy opisów dla elementów wideo i audio, znacząco poprawiając dostępność i komfort użytkowania serwisów internetowych z treściami multimedialnymi.