Data publikacji: 20 sierpnia 2020 r.
Napisy i opisy dla czytników ekranu to jedyne sposoby, dzięki którym wielu użytkowników może oglądać Twoje filmy. W niektórych jurysdykcjach są one nawet wymagane przez prawo lub przepisy. Format WebVTT (Web Video Text Tracks) służy do opisywania danych tekstowych zsynchronizowanych czasowo, takich jak napisy lub napisy CC, aby zwiększyć dostępność filmów.
Dodawanie tagów <track>
Aby dodać napisy lub opisy czytnika ekranu do filmu internetowego, dodaj tag <track> w tagu <video>. Oprócz napisów i opisów dla czytników ekranu tagi <track> można też stosować do napisów i tytułów rozdziałów.
Tag <track> jest podobny do elementu <source>, ponieważ oba mają atrybut src, który wskazuje na treści, do których się odwołują. W przypadku tagu <track> wskazuje on plik WebVTT.
Atrybut label określa, jak można zidentyfikować dany utwór w interfejsie.
Aby przesłać ścieżki w wielu językach, dodaj osobny tag <track> do każdego przesyłanego pliku WebVTT i wskaż język za pomocą atrybutu srclang.
Zwróć uwagę na przykładowy tag <video> z 2 tagami <track>.
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>
Możesz też zobaczyć przykład na Glitch.
Struktura pliku WebVTT
Oto hipotetyczny plik WebVTT do celów demonstracyjnych. Jest to plik tekstowy zawierający serię wskazówek. Każdy sygnał to blok tekstu do wyświetlenia na ekranie oraz zakres czasu, w którym jest wyświetlany.
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 cue. Każda podpowiedź ma czas rozpoczęcia i zakończenia. Są one rozdzielone strzałką, po której następuje jej tekst. Wskaźniki mogą też mieć identyfikatory, takie jak railroad i manuscript. Wskazówki są oddzielone 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.
Czasy wskazówek są w formacie hours:minutes:seconds.milliseconds. Analiza jest rygorystyczna.
Oznacza to, że w razie potrzeby liczby muszą być uzupełnione zerami: godziny, minuty i sekundy muszą mieć 2 cyfry (00 w przypadku wartości równej 0), a milisekundy – 3 cyfry (000 w przypadku wartości równej 0). Na stronie Live WebVTT Validator znajdziesz świetny walidator WebVTT, który sprawdza błędy w formatowaniu czasu oraz problemy takie jak niespójne czasy.
Plik VTT możesz utworzyć ręcznie, ale istnieje też wiele usług, które mogą to zrobić za Ciebie.
Jak widać w poprzednich przykładach, format WebVTT jest dość prosty. Wystarczy, że dodasz tekst wraz z czasem.
Co jednak, jeśli chcesz, aby napisy były renderowane w innej pozycji z wyrównaniem do lewej lub prawej? Może dlatego, że napisy są dopasowywane do pozycji aktualnego mówcy lub aby nie zasłaniać tekstu wyświetlanego na ekranie. WebVTT określa ustawienia, które umożliwiają to,
a także inne funkcje, bezpośrednio w pliku
.vtt. Zwróć uwagę, jak definiuje się położenie napisów. Aby to zrobić, dodaj ustawienia po definicjach przedziałów czasowych.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
Inną przydatną funkcją jest możliwość stylizowania podpowiedzi za pomocą CSS. Możesz użyć szarego gradientu liniowego jako tła oraz koloru papayawhip dla wszystkich napisów i pogrubionego tekstu w kolorze 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 stylizacji i oznaczaniu poszczególnych cue, zajrzyj do specyfikacji WebVTT, która zawiera zaawansowane przykłady.
Rodzaje ścieżek tekstowych
Czy zauważyłeś atrybut kind elementu <track>? Służy do wskazania, jaki związek ma dana ścieżka tekstowa z filmem. Możliwe wartości atrybutu kind to:
captions: napisy z transkrypcji i ewentualnie tłumaczenia dowolnego dźwięku. Rozwiązanie odpowiednie dla osób niedosłyszących oraz w przypadku, gdy film jest odtwarzany bez dźwięku.subtitles: w przypadku napisów, czyli tłumaczeń mowy i tekstu w języku innym niż główny język filmu.descriptions: do opisów wizualnych części treści filmu. Odpowiednie dla osób z wadą wzroku.chapters: przeznaczone do wyświetlania, gdy użytkownik przewija film.metadata: nie są widoczne i mogą być używane przez skrypty.
Skoro znasz już podstawy udostępniania filmów na swojej stronie internetowej, możesz przejść do bardziej złożonych przypadków użycia. Dowiedz się więcej o ramkach mediów i o tym, jak mogą one ułatwić dodawanie filmów do strony internetowej, a jednocześnie zapewniać zaawansowane funkcje.