Autor publikacji
Virtual Patriot - Administrator

track

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu track

Element track reprezentuje zasób internetowy, który ma pełnić rolę dodatkowego, tekstowego, pojawiającego się w określonym czasie zasobu internetowego przeznaczonego dla zasobu internetowego, który może być reprezentowany przez któryś z elementów HTML należących do kategorii element media.

Dodatkowe artykuły związane z elementem track

Informacje techniczne o elemencie track

kategoria ogólna

brak

kontekst zewnętrzny

jako element dziecko elementu media, lecz przed jakąkolwiek ewentualną zawartością opływającą danego elementu media

Przykładowy Kod HTML

<figure>
  <figcaption>Przykładowe wideo</figcaption>

  <video src="wideo-01.mp4" controls>
    <track src="polskie-napisy-01.vtt" kind="subtitles" srclang="pl" label="napisy w języku polskim" default>
  </video>
</figure>

Kontekstem zewnętrznym przykładowego elementu "track" jest element "video", dla którego wspomniany element "track" jest elementem dzieckiem. Ponadto wspomniany element "video" jest jednym z elementów HTML, które należą do kategorii elementy media, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "video", jest prawidłowym kontekstem zewnętrznym dla elementu "track".

Przykładowy Kod HTML

<figure>
  <figcaption>Przykładowe wideo</figcaption>

  <video src="wideo-01.mp4" controls>
    <track src="polskie-napisy-01.vtt" kind="subtitles" srclang="pl" label="napisy w języku polskim" default>

    <p>
      Twoja przeglądarka internetowa nie obsługuje elementu "video"
    </p>
  </video>
</figure>

Kontekstem zewnętrznym przykładowego elementu "track" jest element "video", dla którego wspomniany element "track" jest elementem dzieckiem. Wspomniany element "video" jest jednym z elementów HTML, które należą do kategorii elementy media. Ponadto wspomniany element "track" występuje przed zawartością opływającą elementu "video", którą w tym wypadku jest element "p", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "video", jest prawidłowym kontekstem zewnętrznym dla elementu "track".

kontekst wewnętrzny

brak

wymagane elementy dzieci

brak

wymagane atrybuty
zdolność fallback

nie dotyczy

składnia HTML

<track>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

zawsze

CSS display

inline

Przypuszczalnie domyślne reguły CSS elementu track

/* brak */

Interpretacja elementu track

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji elementu .

Opis atrybutów elementu track

Atrybut Lokalny

default

Przeznaczenie atrybutu default

Atrybut default wykorzystany wraz z elementem track pozwala nam określić czy zasób internetowy reprezentowany przez dany element track powinien pełnić rolę domyślnie włączonego zasobu internetowego.

Tylko jeden element "track" posiadający atrybut "default" wraz z atrybutem kind, którego wartością jest wartość subtitles lub wartość captions, może być elementem dzieckiem elementu media.

Tylko jeden element "track" posiadający atrybut "default" wraz z atrybutem kind, którego wartością jest wartość description, może być elementem dzieckiem elementu media.

Tylko jeden element "track" posiadający atrybut "default" wraz z atrybutem kind, którego wartością jest wartość chapters, może być elementem dzieckiem elementu media.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu default

default

Atrybut default jest atrybutem logicznym elementu track.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" controls>
      <track src="https://webkod.pl/files/html/napisy-pl-01.vtt" kind="subtitles" srclang="pl" label="napisy w języku polskim" default>
      <track src="https://webkod.pl/files/html/napisy-en-01.vtt" kind="subtitles" srclang="en" label="napisy w języku angielskim">
    </video>

    <!-- KOD ŹRÓDŁOWY PLIKU: napisy-pl-01.vtt -->

    WEBVTT

    00:00:03.000 --> 00:00:06.000
    PRZYKŁADOWE NAPISY W JĘZYKU POLSKIM

    00:00:08.000 --> 00:00:18.000
    Pierwszy Napis

    00:00:20.000 --> 00:00:28.000
    Drugi Napis

    00:00:30.000 --> 00:00:35.000
    Trzeci Napis

    00:00:37.000 --> 00:00:43.000
    Czwarty Napis

    00:00:45.000 --> 00:00:50.000
    Piąty Napis

    00:00:52.000 --> 00:00:56.000
    Ostatni Napis

  </body>
</html>

Rezultat

Domyślnie włączonym zasobem internetowym, dla zasobu internetowego "film-01.mp4" reprezentowanego przez element "video", jest zasób internetowy "napisy-pl-01.vtt" reprezentowany przez pierwszy przykładowy element "track", ponieważ do wspomnianego elementu "track" został dodany atrybut "default".

Atrybut Lokalny

kind

Przeznaczenie atrybutu kind

Atrybut kind wykorzystany wraz z elementem track pozwala nam określić informację o tym, jakiego rodzaju jest zasób internetowy reprezentowany przez dany element track.

Wartość domyślna

subtitles (gdy pominęliśmy atrybut)

metadata (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu kind

subtitles

Wartość subtitles oznacza, że zasób internetowy reprezentowany przez dany element track jest transkrypcją lub tłumaczeniem językowym dialogu.

W tym wypadku zasób internetowy reprezentowany przez dany element track ma sens, gdy zasób internetowy reprezentowany przez element media posiada dźwięk zawierający dialog, który został utworzony w języku przypuszczalnie niezrozumiałym dla docelowego użytkownika.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" controls>
      <track src="https://webkod.pl/files/html/napisy-pl-01.vtt" kind="subtitles" srclang="pl" label="napisy w języku polskim">
    </video>

  </body>
</html>

Ponieważ do przykładowego elementu "track" został dodany atrybut "kind" wraz z wartością "subtitles", przykładowy element "track" reprezentujący zasób internetowy "napisy-pl-01.vtt" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy "napisy-pl-01.vtt" jest rodzaju "subtitles".

captions

Wartość captions oznacza, że zasób internetowy reprezentowany przez dany element track jest transkrypcją, tłumaczeniem językowym dialogu, tłumaczeniem językowym efektu dźwiękowego lub inną tego typu informacją odnoszącą się do dźwięku.

W tym wypadku zasób internetowy reprezentowany przez dany element track ma sens, gdy docelowy użytkownik jest słabosłyszący lub głuchy, albo gdy zasób internetowy reprezentowany przez element media nie posiada dźwięku lub posiada dźwięk, który został wyciszony lub zagłuszony, dlatego wymaga dodatkowego opisu lub tłumaczenia.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" controls>
      <track src="https://webkod.pl/files/html/tlumaczenie-pl-01.vtt" kind="captions" srclang="pl" label="tłumaczenie w języku polskim">
    </video>

  </body>
</html>

Ponieważ do przykładowego elementu "track" został dodany atrybut "kind" wraz z wartością "captions", przykładowy element "track" reprezentujący zasób internetowy "tlumaczenie-pl-01.vtt" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy "tlumaczenie-pl-01.vtt" jest rodzaju "captions".

descriptions

Wartość descriptions oznacza, że zasób internetowy reprezentowany przez dany element track jest opisem tekstowym, który może zostać przetworzony na dźwięk.

W tym wypadku zasób internetowy reprezentowany przez dany element track ma sens, gdy docelowy użytkownik jest słabowidzący lub ślepy, albo gdy docelowy użytkownik korzysta z urządzenia nieposiadającego ekranu, np. podczas przemieszczania się środkiem transportu, albo gdy zasób internetowy reprezentowany przez element video posiada treść, która nie jest widoczna w całości.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" controls>
      <track src="https://webkod.pl/files/html/opis-pl-01.vtt" kind="descriptions" srclang="pl">
    </video>

  </body>
</html>

Ponieważ do przykładowego elementu "track" został dodany atrybut "kind" wraz z wartością "descriptions", przykładowy element "track" reprezentujący zasób internetowy "opis-pl-01.vtt" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy "opis-pl-01.vtt" jest rodzaju "descriptions".

chapters

Wartość chapters oznacza, że zasób internetowy reprezentowany przez dany element track jest dodatkową nawigacją przeznaczoną dla treści zasobu internetowego reprezentowanego przez element media.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" controls>
      <track src="https://webkod.pl/files/html/nawigacja-pl-01.vtt" kind="chapters" srclang="pl">
    </video>

  </body>
</html>

Ponieważ do przykładowego elementu "track" został dodany atrybut "kind" wraz z wartością "chapters", przykładowy element "track" reprezentujący zasób internetowy "nawigacja-pl-01.vtt" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy "nawigacja-pl-01.vtt" jest rodzaju "chapters".

metadata

Wartość metadata oznacza, że zasób internetowy reprezentowany przez dany element track musi zostać obsłużony przez dodatkowy skrypt (np. skrypt języka programowania JavaScript), aby móc spełniać swoją docelową funkcję.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" controls>
      <track src="https://webkod.pl/files/html/animowane-napisy-pl-01.vtt" kind="metadata" srclang="pl">
    </video>

  </body>
</html>

Ponieważ do przykładowego elementu "track" został dodany atrybut "kind" wraz z wartością "metadata", przykładowy element "track" reprezentujący zasób internetowy "animowane-napisy-pl-01.vtt" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy "animowane-napisy-pl-01.vtt" jest rodzaju "metadata".

Atrybut Lokalny

label

Przeznaczenie atrybutu label

Atrybut label wykorzystany wraz z elementem track pozwala nam określić nazwę etykiety, jaką powinien posiadać zasób internetowy reprezentowany przez dany element track.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu label

nazwa etykiety

Należy podać niepusty ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas nazwy etykiety.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" controls>
      <track src="https://webkod.pl/files/html/napisy-pl-01.vtt" kind="subtitles" srclang="pl" label="napisy w języku polskim" default>
      <track src="https://webkod.pl/files/html/napisy-en-01.vtt" kind="subtitles" srclang="en" label="napisy w języku angielskim">
    </video>

  </body>
</html>

Rezultat

Nazwą etykiety, jaką posiada zasób internetowy "napisy-pl-01.vtt" reprezentowany przez pierwszy przykładowy element "track", jest nazwa "napisy w języku polskim", ponieważ do wspomnianego elementu "track" został dodany atrybut "label" wraz z wartością "napisy w języku polskim".

Atrybut Lokalny

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem track pozwala nam określić adres zasobu internetowego, który chcemy, aby był reprezentowany przez dany element track.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu src

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" controls>
      <track src="https://webkod.pl/files/html/napisy-pl-01.vtt" kind="subtitles" srclang="pl" label="napisy w języku polskim" default>
    </video>

  </body>
</html>

Rezultat

Zasobem internetowym reprezentowanym przez przykładowy element "track" jest zasób internetowy "napisy-pl-01.vtt" znajdujący się pod adresem "https://webkod.pl/files/html/napisy-pl-01.vtt", ponieważ do wspomnianego elementu "track" został dodany atrybut "src" wraz z wartością "https://webkod.pl/files/html/napisy-pl-01.vtt".

Atrybut Lokalny

srclang

Przeznaczenie atrybutu srclang

Atrybut srclang wykorzystany wraz z elementem track pozwala nam określić informację o języku, jaki posiada zasób internetowy reprezentowany przez dany element track.

Atrybut "srclang" jest atrybutem wymaganym elementu "track", lecz tylko wtedy gdy wartością atrybutu kind danego elementu "track" jest wartość subtitles.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu srclang

symbol języka

Należy podać ciąg znaków w formie symbolu języka (Norma ISO 639-1).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <video src="https://webkod.pl/files/html/film-01.mp4" controls>
      <track src="https://webkod.pl/files/html/napisy-pl-01.vtt" kind="subtitles" srclang="pl" label="napisy w języku polskim" default>
    </video>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "track" został dodany atrybut "srclang" wraz z wartością "pl", przykładowy element "track" reprezentujący zasób internetowy "napisy-pl-01.vtt" zawiera dodatkową informację dla przeglądarki internetowej o tym, że językiem, jaki posiada zasób internetowy "napisy-pl-01.vtt", jest język polski.