<track>

Plik z napisami, opisami lub rozdziałami dla `<video>` i `<audio>`.

Wyświetlanie: nie jest wyświetlany
Znacznik zamykający: Brak, element pusty
Dozwolona zawartość: Brak, element pusty

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<video controls width="300" height="200" preload="none" poster="/collections/covers/nauka-javascript-dla-poczatkujacych.webp">
  <source src="/media/lekcja-js.mp4" type="video/mp4">
  <track kind="captions" src="/media/lekcja-js-pl.vtt" srclang="pl" label="Polski" default>
  <track kind="subtitles" src="/media/lekcja-js-en.vtt" srclang="en" label="English">
</video>

Podgląd

Plik wideo i pliki napisów zostały pominięte w podglądzie.

Definicja i zastosowanie

Element <track> dołącza do filmu lub nagrania ścieżkę tekstową w formacie WebVTT (plik .vtt). Najczęściej są to napisy, ale mogą to być też opisy scen dla osób niewidomych albo lista rozdziałów. Jest elementem pustym i stoi wewnątrz <video> lub <audio>, po elementach <source>.

Rodzaj ścieżki określa atrybut kind: subtitles to tłumaczenie dialogów na inny język, a captions to pełne napisy dla osób niesłyszących, także z opisem dźwięków, na przykład „[muzyka]”. Atrybut srclang podaje język, a label nazwę widoczną w menu odtwarzacza.

Plik z napisami musi pochodzić z tej samej domeny co strona albo być udostępniony z nagłówkami CORS (wtedy na <video> dodajesz atrybut crossorigin). To częsta przyczyna sytuacji, w której napisy „nie działają”.

Składnia

<track kind="subtitles" src="napisy.vtt" srclang="pl" label="Polski">

Atrybuty

kind
subtitles | captions | descriptions | chapters | metadata
Rodzaj ścieżki, domyślnie subtitles. descriptions zawiera tekstowe opisy tego, co dzieje się na ekranie, chapters tytuły rozdziałów do nawigacji, a metadata dane dla skryptów, niewidoczne dla użytkownika.
src
URL pliku .vtt
Adres pliku WebVTT ze ścieżką. Atrybut jest wymagany.
srclang
kod języka, np. `pl`, `en`
Język ścieżki. Wymagany, gdy kind ma wartość subtitles.
label
tekst
Nazwa ścieżki wyświetlana w menu wyboru napisów, na przykład „Polski” albo „English”.
default
atrybut logiczny
Włącza tę ścieżkę domyślnie. Wśród napisów jednego odtwarzacza może go mieć tylko jedna ścieżka.

Atrybut	Wartości	Opis
kind	subtitles \| captions \| descriptions \| chapters \| metadata	Rodzaj ścieżki, domyślnie `subtitles`. `descriptions` zawiera tekstowe opisy tego, co dzieje się na ekranie, `chapters` tytuły rozdziałów do nawigacji, a `metadata` dane dla skryptów, niewidoczne dla użytkownika.
src	URL pliku .vtt	Adres pliku WebVTT ze ścieżką. Atrybut jest wymagany.
srclang	kod języka, np. `pl`, `en`	Język ścieżki. Wymagany, gdy `kind` ma wartość `subtitles`.
label	tekst	Nazwa ścieżki wyświetlana w menu wyboru napisów, na przykład „Polski” albo „English”.
default	atrybut logiczny	Włącza tę ścieżkę domyślnie. Wśród napisów jednego odtwarzacza może go mieć tylko jedna ścieżka.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Więcej przykładów

Przykładowy plik napisów WebVTT

Tekst

WEBVTT

00:00:00.000 --> 00:00:03.500
Cześć! W tej lekcji poznasz zmienne.

00:00:04.000 --> 00:00:08.000
Zmienna to pudełko z etykietą, w którym przechowujesz wartość.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Plik .vtt musi zaczynać się od słowa WEBVTT, a czasy zapisujesz w formacie 00:00:04.000 --> 00:00:08.000.
Jeśli podajesz napisy w kilku językach, default ustaw tylko na jednej ścieżce.
Napisy wyświetlają się tylko w <video>. W <audio> ścieżki tekstowe są dostępne dla skryptów, na przykład do pokazania własnej transkrypcji.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs