W tym artykule zapoznasz się z formatem WebVTT (Web Video Text Tracks), który służy do opisywania danych tekstowych czasowych, np. napisów, aby filmy były bardziej przystępne dla Twoich odbiorców.
Ułatwienia dostępu nie są jak wisy na torcie. To nie jest coś, co chcesz dodać do zaplecza, żeby móc go później wprowadzić. Napisy i opisy z czytnika ekranu to jedyny sposób, w jaki wielu użytkowników może poznać Twoje filmy. W niektórych regionach takie treści są nawet wymagane przez prawo lub przepisy.
Dodaj <track> tagów
Aby dodać do filmu w internecie napisy lub opisy czytnika ekranu, dodaj tag <track> w tagu <video>. Oprócz napisów i opisów czytnika ekranu można też używać tagów <track> do napisów i tytułów rozdziałów.
Tag <track> może też ułatwić wyszukiwarkom zrozumienie zawartości filmu.
Te możliwości wykraczają poza zakres tego artykułu.
Tag <track> jest podobny do elementu <source> pod tym względem, że oba mają atrybut src wskazujący na odniesienia do treści. W przypadku tagu <track> wskazuje plik WebVTT. Atrybut label określa, jak dana ścieżka będzie identyfikowana w interfejsie.
Aby zapewnić ścieżki w różnych językach, dodaj osobny tag <track> dla każdego przesyłanego pliku WebVTT i wskaż język za pomocą atrybutu srclang.
Poniżej pokazano przykładowy tag <video> z 2 tagami <track>. Dostępny jest też przykładowy plik, który możesz wyświetlić w Glitchu (źródło).
Dodaj element <track> jako element podrzędny elementu <video>:
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
Struktura pliku WebVTT
Poniżej znajduje się hipotetyczny plik WebVTT demonstracyjny, do którego link znajduje się powyżej. Plik jest plikiem tekstowym zawierającym serię wskaźników. Każda wskazówka to blok tekstu wyświetlany na ekranie wraz z zakresem czasu, w którym ma być wyświetlana.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
Każdy element w pliku ścieżki jest nazywany wskaźnikiem. Każda wskazówka ma godzinę rozpoczęcia i zakończenia rozdzielone strzałką, a w poniższym wierszu znajduje się tekst wskazówki. Gesty mogą też mieć też opcjonalnie identyfikatory, takie jak railroad i manuscript w przykładzie poniżej.
Wskazówki są rozdzielone pustym wierszem.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
Godziny wstawienia reklamy są podane w formacie hours:minutes:seconds.milliseconds. Analiza jest rygorystyczna.
Oznacza to, że w razie potrzeby liczby muszą być uzupełniane zerem: godziny, minuty i sekundy muszą składać się z 2 cyfr (00 w przypadku wartości zerowej), a milisekundy – 3 cyfr (000 w przypadku wartości zerowej). Na stronie Live WebVTT Validator dostępny jest doskonały walidator WebVTT, który sprawdza, czy nie występują błędy w formatowaniu czasu, a także problemy dotyczące na przykład odstępów czasowych.
Plik VTT możesz utworzyć ręcznie, pamiętając, że istnieje wiele usług, które to zrobią.
Jak widać w naszych poprzednich przykładach, format WebVTT jest dość prosty. Wystarczy, że dodasz dane tekstowe wraz z czasem.
A co, jeśli chcesz, by napisy były renderowane w innej pozycji, wyrównając ją do lewej lub do prawej? Możesz dostosować napisy do bieżącej pozycji
rozmówcy lub odsunąć się od tekstu widocznego w kamerze. WebVTT określa ustawienia, które służą do tego i innych działań bezpośrednio w pliku .vtt. Zanotuj sposób definiowania miejsca docelowego napisów,
dodając ustawienia po definicjach przedziału czasu.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
Kolejną przydatną funkcją jest możliwość zmiany stylu wskazówek za pomocą CSS. Możesz np. użyć szarego gradientu liniowego jako tła, pierwszego papayawhip we wszystkich podpisach i pogrubionego tekstu – peachpuff.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Jeśli chcesz dowiedzieć się więcej o stylaniu i tagowaniu poszczególnych wskazówek, dobrym źródłem przykładów zaawansowanych jest specyfikacja WebVTT.
Rodzaje ścieżek tekstowych
Czy widzisz atrybut kind elementu <track>? Służy on do określenia
relacji konkretnej ścieżki tekstowej z filmem. Możliwe wartości atrybutu kind:
captions: dotyczy napisów z transkrypcji oraz ewentualnych tłumaczeń dowolnego dźwięku. Ta opcja jest odpowiednia dla osób niedosłyszących oraz w przypadku, gdy film jest odtwarzany z wyciszonym dźwiękiem.subtitles: jeśli chodzi o napisy, czyli tłumaczenia mowy i tekstu w języku innym niż główny język filmu.descriptions: służy do opisywania wizualnych części treści wideo. Odpowiednie dla osób z wadą wzroku.chapters: przeznaczone do wyświetlania, gdy użytkownik porusza się po filmie.metadata: niewidoczne i mogą być używane przez skrypty.
Po zapoznaniu się z podstawami udostępniania filmów na stronie internetowej możesz zacząć zastanawiać się nad bardziej skomplikowanymi przypadkami użycia. W następnej kolejności omówimy platformy multimediów i ich zastosowanie w dodawaniu filmów na stronie internetowej przy jednoczesnym zapewnianiu zaawansowanych funkcji.