Napisy do filmów <track>

(interpretuje: Chrome 23, Firefox 31, Edge 12, Opera 12.1, Safari 6)

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

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 - nieważ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 <track>

Zobacz przykład: TRACK

Rodzaj napisów

Istnieje możliwość podania więcej niż jednego znacznika <track> dla tego samego materiału wideo. Mogą to być tłumaczenia napisów na różne języki. W takim przypadku pomocny jest atrybut srclang="...", w którym podajemy nazwę kodową języka (zobacz: Skróty nazw języków). Oprócz tego zaleca się również podanie atrybutu label="...", którego wartość może być wyświetlona w odtwarzaczu wideo, aby użytkownik mógł samodzielnie wybrać najbardziej odpowiadające mu napisy.

Możemy jednak również chcieć dostarczyć specjalne napisy dla osób niesłyszących albo transkrypcję dla niewidomych. W takim przypadku należy się posłużyć atrybutem kind="...". Określa on rodzaj napisów, dzięki czemu przeglądarka może wybrać odpowiedni w zależności od okoliczności. Dopuszczalne wartości tego atrybutu to:

subtitles

Typowe napisy, które widzimy np. w kinie na obcojęzycznych filmach. Są po prostu tłumaczeniem na język rodzimy wszystkich kwestii wypowiadanych przez aktorów na ekranie.

captions

Opisuje nie tylko dialogi, ale również wszystkie istotne dźwięki w filmie, które są konieczne do pełnego zrozumienia fabuły. Tego typu napisy często są używane przez osoby niesłyszące. Jednak mogą być przydatne również w sytuacji, kiedy użytkownik sam wyciszy dźwięk.

descriptions

Tego typu napisy zwykle są odczytywane na głos przez syntezator mowy, a nie wyświetlane bezpośrednio na filmie. Zawierają tekstowy opis całego filmu, z którego często korzystają osoby niewidome. Może on być jednak przydatny również w sytuacji, kiedy z jakiegoś powodu wideo nie może być odtworzone - np. kiedy kierujemy samochodem.

Przykład <video, track kind srclang label>

<video src="file.mp4">
	<track kind="subtitles" src="subtitles.vtt" srclang="pl" label="Polski">
	<track kind="subtitles" src="subtitles-en.vtt" srclang="en" lang="en" label="English">
	<track kind="captions" src="captions.vtt" srclang="pl" label="Napisy dla niesłyszących">
	<track kind="descriptions" src="descriptions.vtt" srclang="pl" label="Transkrypcja dla niewidomych">
</video>

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