Ostatnio edytowany:

track

Autor: Virtual Patriot

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 reprezentowanego przez któryś z elementów HTML należących do kategorii element media.

Dodatkowe techniczne informacje o elemencie track

kategoria ogólna
  • brak
kontekst zewnętrzny
  • jako element dziecko elementu media przed jakąkolwiek ewentualną zawartością opływającą wspomnianego 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" default>
      </video>
    </figure>

    Kontekstem zewnętrznym przykładowego elementu "track" jest element "video". 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" 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
składnia HTML
  • <track>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • zawsze
CSS display
  • none

Dodatkowe domyślne reguły CSS elementu track

track {
  display:none;
}

Interpretacja elementu track

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Opis atrybutów elementu track

default

Przeznaczenie atrybutu default

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

Tylko jeden element "track" posiadający atrybut "default" oraz atrybut kind o wartości subtitles lub o wartości captions może być elementem dzieckiem elementu media.

Tylko jeden element "track" posiadający atrybut "default" oraz atrybut kind o wartości description może być elementem dzieckiem elementu media.

Tylko jeden element "track" posiadający atrybut "default" oraz atrybut kind o wartości 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="http://webkod.pl/files/html/film-01.mp4" controls>
      <track src="http://webkod.pl/files/html/film-01-napisy-pl-01.vtt" kind="subtitles" srclang="pl" default>
      <track src="http://webkod.pl/files/html/film-01-napisy-en-01.vtt" kind="subtitles" srclang="en">
    </video>

    <!-- KOD ŹRÓDŁOWY PLIKU - film-01-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

Sugerowanym dla przeglądarki internetowej domyślnie włączonym dodatkowym tekstowym zasobem internetowym dla zasobu internetowego reprezentowanego przez element "video" jest zasób internetowym reprezentowanym przez przykładowy element "track" posiadający atrybut "srclang" o wartości "pl", ponieważ do wspomnianego elementu "track" został dodany atrybut "default".

kind

Przeznaczenie atrybutu kind

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

Wartość domyślna

subtitles (gdy pominęliśmy atrybut)

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

Wartości atrybutu kind

subtitles

Wartość subtitles oznacza, że dany element track reprezentuje zasób internetowy, którym powinna być transkrypcja lub tłumaczenie językowe. 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, który zawiera 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="http://webkod.pl/files/html/film-01.mp4" controls>
      <track src="http://webkod.pl/files/html/film-01-napisy-pl-01.vtt" kind="subtitles" srclang="pl" default>
    </video>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "track" został dodany atrybut "kind" wraz z wartością "subtitles" wspomniany element "track" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "track" jest rodzaju "subtitles".

captions

Wartość captions oznacza, że dany element track reprezentuje zasób internetowy, którym powinna być transkrypcja lub inne tłumaczenie danego dźwięku. W tym wypadku zasób internetowy reprezentowany przez dany element track ma sens, gdy docelowy użytkownik jest głuchy, słabosłyszący lub gdy zasób internetowy reprezentowany przez element media nie posiada dźwięku lub posiada niewyraźny, nieczysty, słabo słyszalny dźwięk, który zawiera dialog lub inne sygnały dźwiękowe, które wymagają dodatkowego opisu, tłumaczenia.

Przykładowy Kod HTML

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

    <video src="http://webkod.pl/files/html/film-01.mp4" controls>
      <track src="http://webkod.pl/files/html/film-01-napisy-pl-01.vtt" kind="captions" default>
    </video>

  </body>
</html>

Ponieważ do przykładowego elementu "track" został dodany atrybut "kind" wraz z wartością "captions" wspomniany element "track" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "track" jest rodzaju "captions".

descriptions

Wartość descriptions oznacza, że dany element track reprezentuje zasób internetowy posiadający tekst, który powinien zostać przetworzony na dźwięk. W tym wypadku zasób internetowy reprezentowany przez dany element track ma sens, gdy zasób internetowy reprezentowany przez element video jest niewidoczny w całości lub po części lub gdy docelowy użytkownik jest ślepy lub gdy docelowy użytkownik korzysta z urządzenia nieposiadającego ekranu, np. podczas przemieszczania się środkiem transportu.

Przykładowy Kod HTML

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

    <video src="http://webkod.pl/files/html/film-01.mp4" controls>
      <track src="http://webkod.pl/files/html/film-01-napisy-pl-01.vtt" kind="descriptions" default>
    </video>

  </body>
</html>

Ponieważ do przykładowego elementu "track" został dodany atrybut "kind" wraz z wartością "descriptions" wspomniany element "track" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "track" jest rodzaju "descriptions".

chapters

Wartość chapters oznacza, że dany element track reprezentuje zasób internetowy, który tworzy nawigację pomiędzy różnymi zasobami internetowymi reprezentowanymi przez elementy HTML należące do kategorii elementy media.

Przykładowy Kod HTML

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

    <video src="http://webkod.pl/files/html/film-01.mp4" controls>
      <track src="http://webkod.pl/files/html/film-01-napisy-pl-01.vtt" kind="chapters" default>
    </video>

  </body>
</html>

Ponieważ do przykładowego elementu "track" został dodany atrybut "kind" wraz z wartością "chapters" wspomniany element "track" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "track" jest rodzaju "chapters".

metadata

Wartość metadata oznacza, że dany element track reprezentuje zasób internetowy, który nie zostanie wyświetlony dla użytkownika, lecz który może zostać wykorzystany przez dodatkowy skrypt znajdujący się w zawartości danego dokumentu HTML, np. skrypt języka JavaScript.

Przykładowy Kod HTML

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

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

  </body>
</html>

Ponieważ do przykładowego elementu "track" został dodany atrybut "kind" wraz z wartością "metadata" wspomniany element "track" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "track" jest rodzaju "metadata".

label

Przeznaczenie atrybutu label

Atrybut label wykorzystany wraz z elementem track określa etykietę w postaci tytułu dla zasobu internetowego reprezentowanego przez dany element track.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu label

tytuł

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

Przykładowy Kod HTML

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

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

  </body>
</html>

Rezultat

Zasób internetowy reprezentowany przez przykładowy element "track" posiadający atrybut "srclang" o wartości "pl" posiada swoją własną etykietę w postaci tytułu, którego treścią jest ciąg znaków "napisy w języku polskim", ponieważ do wspomnianego elementu "track" został dodany atrybut "label" wraz z wartością "napisy w języku polskim".

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem track określa adres zasobu internetowego, który powinien 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="http://webkod.pl/files/html/film-01.mp4" controls>
      <track src="http://webkod.pl/files/html/film-01-napisy-pl-01.vtt" kind="subtitles" srclang="pl" default>
    </video>

  </body>
</html>

Rezultat

Zasobem internetowym, który powinien być reprezentowany przez przykładowy element "track" jest zasób internetowy "film-01-napisy-pl-01.vtt" znajdujący się pod adresem "http://webkod.pl/files/html/film-01-napisy-pl-01.vtt", dlatego do wspomnianego elementu "track" został dodany atrybut "src" wraz z wartością "http://webkod.pl/files/html/film-01-napisy-pl-01.vtt".

srclang

Przeznaczenie atrybutu srclang

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

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="http://webkod.pl/files/html/film-01.mp4" controls>
      <track src="http://webkod.pl/files/html/film-01-napisy-pl-01.vtt" kind="subtitles" srclang="pl" default>
    </video>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "track" został dodany atrybut "srclang" wraz z wartością "pl" wspomniany element "track" reprezentujący zasób internetowy znajdujący się pod adresem "http://webkod.pl/files/html/film-01-napisy-pl-01.vtt" zawiera dodatkową informację dla przeglądarki internetowej o tym, że bazowym językiem, jaki posiada wspomniany zasób internetowy jest język polski.