Ostatnio edytowany:

Element media - dodatkowy zasób internetowy

Autor: Virtual Patriot

Za pomocą elementu track możemy wskazać dla przeglądarki internetowej 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.

Utworzenie zasobu internetowego, który może być reprezentowany przez element track między innymi wiąże się ze znajomością WebVTT.

Przykład:

<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>

<!-- 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

Rezultat:

W czasie odtwarzania zasobu internetowego film-01.mp4 znajdującego się pod adresem http://webkod.pl/files/html/film-01.mp4 oraz reprezentowanego przez przykładowy element video, w oknie przeglądarki internetowej w określonym czasie będzie pojawiać się treść reprezentowana przez zawartość zasobu internetowego film-01-napisy-pl-01.vtt, ponieważ wspomniany element video posiada element track, który to element track reprezentuje 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.

Ponadto warto wiedzieć, że za pomocą wartości atrybutu kind możemy określić dodatkową informację dla przeglądarki internetowej o tym, jakiego rodzaju jest zasób internetowy reprezentowany przez dany element track, natomiast za pomocą wartości atrybutu srclang możemy określić dodatkową informację dla przeglądarki internetowej o bazowym języku, jaki posiada zasób internetowy reprezentowany przez dany element track, dodatkowo za pomocą atrybutu logicznego default możemy określić czy zasób internetowy reprezentowany przez dany element track ma pełnić rolę domyślnie włączonego zasobu internetowego dla zasobu internetowego reprezentowanego przez któryś z elementów HTML należących do kategorii element media.