Przejdź do treści

HTML5

TRACK

(interpretuje: Firefox 31, Opera, Chrome)

<video>
	<source src="lokalizacja pliku w formacie 1" type='format 1'>
	<source src="lokalizacja pliku w formacie 2" type='format 2'>
	(...)
	<track src="napisy.vtt" default>
	(...)
	Treść alternatywna
</video>
gdzie:
napisy.vtt
Lokalizacja pliku tekstowego z napisami (*.vtt) - na dysku lub adres URL do pliku w Internecie. Dodanie atrybutu default jest konieczne. Inaczej napisy mogą nie zostać wyświetlone!
lokalizacja pliku w formacie 1, lokalizacja pliku w formacie 2..., format 1, format 2..., Treść alternatywna
Opisane w rozdziale: VIDEO, AUDIO, SOURCE.

Napisy wyświetlane zwykle na dole ekranu są - obok głosu lektora i dubbingu - jednym ze sposobów na przekład filmu na inny język niż ten, w którym pierwotnie został on nakręcony. Tekst tłumaczenia teoretycznie można zapisać bezpośrednio w ścieżce wideo. Wtedy jednak każde tłumaczenie filmu byłoby fizycznie osobnym plikiem wideo. Na dodatek użytkownik np. słabowidzący albo posiadający niewielki monitor, nie mógłby sterować wielkością tekstu napisów. Dlatego dużo lepiej jest przygotować osobny, względnie niewielkich rozmiarów plik tekstowy z napisami. Jeżeli ktoś z innego kraju będzie chciał obejrzeć film, wystarczy że pobierze dokładnie ten sam plik wideo i dodatkowo poszuka sobie pliku napisów dla swojego języka. Taki osobny plik testowy z napisami nazywamy ścieżką tekstową.

Plik napisów tworzy się w dowolnym prostym edytorze tekstu. Możesz do tego celu użyć edytora, w którym normalnie tworzysz strony WWW. Możesz nawet skorzystać ze zwykłego windowsowskiego Notatnika (Notepad) lub dowolnego innego prostego edytora tekstu, wbudowanego w Twój system operacyjny. Zwróć przy tym uwagę tylko na dwie bardzo ważne kwestie:

  • Nazwa pliku musi mieć rozszerzenie *.vtt, a nie *.vtt.txt.
    Aby to zrobić w Notatniku, w oknie zapisywania pliku wybierz opcję: "Zapisz jako typ: Wszystkie pliki", a następnie wpisz pełną nazwę (np. napisy.vtt).
  • Plik napisów musi być zapisany przy użyciu kodowania znaków UTF-8 - nie ważne przy użyciu jakiej strony kodowej został utworzony dokument HTML, w którym jest wstawiony odtwarzacz wideo z dołączonymi tymi napisami.
    Aby to zrobić w Notatniku, w oknie zapisywania pliku wybierz opcję: "Kodowanie: UTF-8". Jeżeli używasz innego edytora możesz posiadać dodatkowo opcję zapisu pliku bez tzw. znaku BOM (znacznik kolejności bajtów) - dla plików *.vtt może on zarówno zostać dodany, jak i pominięty. W tym przypadku raczej korzystniej będzie go dodać (Notatnik robi to automatycznie).

Przykład:

Zobacz przykład: TRACK

WebVTT

Sama zawartość pliku napisów musi być zapisana zgodnie z ustalonym standardem WebVTT (ang. Web Video Text Tracks). W pierwszej linijce pliku należy obowiązkowo umieścić tekst: WEBVTT i zostawić po nim jedną linijkę przerwy. Mówi on, że plik został utworzony zgodnie ze standardem WebVTT. Dalej dodawane są już bloki kolejnych napisów. Każdy blok zawiera przedział czasu, w którym ma się wyświetlać na ekranie oraz sam tekst napisu. Kolejne bloki napisów są od siebie oddzielone pustą linijką. Choć być może brzmi to nieco skomplikowanie, tak naprawdę jest bardzo intuicyjne. Najprostszy plik napisów mógłby wyglądać następująco:

WEBVTT

00:00:01.000 --> 00:00:05.000
Ten napis wyświetli się między pierwszą a piątą sekundą filmu.

00:00:05.000 --> 00:00:10.000
Ten napis wyświetli się między piątą a dziesiątą sekundą filmu.

00:00:20.000 --> 00:00:30.000
Ten napis wyświetli się między dwudziestą a trzydziestą sekundą filmu.

Czasy wyświetlania napisów mogą na siebie również zachodzić, tzn. w jednej klatce filmu można wyświetlić kilka bloków napisów.

Ustawienia napisu

Każdy z bloków napisów może dodatkowo zawierać specjalne ustawienia, sterujące sposobem jego wyświetlania. Ustawienia umieszcza się na końcu linijki podającej przedział czasu - np.:

WEBVTT

00:00:01.000 --> 00:00:05.000 align:start vertical:rl
Ten napis zostanie wyrównany do początku i ustawiony w pionie przy lewej krawędzi.

Obsługiwane ustawienia:

  • align - ustawienie w poziomie
    • start - wyrównanie tekstu do lewej strony
    • end - wyrównanie tekstu do prawej strony
  • vertical - ustawienie w pionie (interpretuje: Chrome)
    • rl - napis przy lewej krawędzi
    • lr - napis przy prawej krawędzi

Dialogi

W celu oznaczenia dialogu/cytatu, odpowiednią linijkę w napisach należy poprzedzić specjalnym znacznikiem, w którym podaje się osobę, która ją wypowiada:

WEBVTT

00:00:05.000 --> 00:00:10.000
<v nauczyciel>- Ile to jest 2x2?
<v uczeń>- Poproszę o inny zestaw pytań.

Formatowanie tekstu

Do tekstu napisów można wprowadzać nawet podstawowe formatowanie tekstu. Obsługiwane są następujące znaczniki HTML: B, I, U. Aby wstawić do napisu znak mniejszości, większości lub ampersand ("&"), należy się posłużyć znanymi z języka HTML encjami: &lt;, &gt;, &amp;.

Stylizacja napisów

(interpretuje: Opera, Chrome)

To jeszcze nie koniec. Można nawet zmienić wygląd napisów przy pomocy stylów CSS. Obsługiwane powinny być następujące własności: color, opacity, visibility, text-decoration, text-outline, text-shadow, background, outline, font, white-space.

Aby zmienić stylizację wszystkich napisów, trzeba posłużyć się specjalnym pseudoelementem:

::cue {
	color: white;
	background: black;
}

Aby zmienić wygląd tekstu, który w napisach został objęty znacznikami B, I, U, należy wpisać:

::cue(b) {
	color: red;
}
::cue(i) {
	color: lime;
}
::cue(u) {
	color: aqua;
}

Aby zmienić wygląd wypowiedzi konkretnych osób w dialogu:

::cue(v[voice="nauczyciel"]) {
	font-style: italic;
}

W pliku *.vtt bezpośrednio przed wybranym blokiem napisów możesz podać identyfikator:

WEBVTT

identyfikator
00:00:01.000 --> 00:00:05.000
Ten napis posiada przypisany identyfikator.

Można się nim potem posłużyć, aby zmienić wygląd całego takiego bloku:

::cue(#identyfikator) {
	color: red;
}

Zobacz także

Komentarze

Zobacz więcej komentarzy