Data publikacji: 20 sierpnia 2020 r.
Wielu użytkowników może korzystać tylko z podpisów i opisów z czytnika ekranu oglądanie filmów. 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.
Dodaj tagi: <track>
Aby dodać napisy lub opisy dla 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ą tag src.
wskazujący treść, do której prowadzi odwołanie. W przypadku tagu <track> wskazuje stronę
Plik WebVTT.
Atrybut label określa, jak dany utwór może być identyfikowany 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.
Spójrz na ten przykładowy tag <video> z dwoma 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ż skorzystać z próbki zobacz Glitch.
Struktura pliku WebVTT
Oto hipotetyczny plik WebVTT do celów demonstracyjnych. To jest plik tekstowy zawierający serię wskazówek. Każda podpowiedź to blok tekstu do wyświetlenia na ekranie oraz przedział 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żdy sygnał ma czas rozpoczęcia i zakończenia, rozdzielone strzałką, a następnie tekst sygnału. Gesty mogą też mieć
Identyfikatory, np. 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 cue są podawane w formacie hours:minutes:seconds.milliseconds. Analiza jest rygorystyczna.
Oznacza to, że w razie potrzeby liczby muszą być puste: godziny, minuty i sekundy
musi składać się z dwóch cyfr (00 dla wartości zerowej), a w milisekundach muszą być trzy cyfry
cyfr (000 dla wartości zerowej). Na stronie Live WebVTT Validator znajdziesz świetny walidator WebVTT, który sprawdza błędy w formatowaniu czasu oraz problemy takie jak niespójne czasy.
Możesz ręcznie utworzyć plik VTT. Istnieje wiele usług, które je dla Ciebie.
Jak widać w poprzednich przykładach, format WebVTT jest dość prosty. Po prostu dodaj dane tekstowe oraz informacje o czasie.
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 definiuje odpowiednie ustawienia,
i nie tylko, bezpośrednio w interfejsie
.vtt. Zwróć uwagę, jak definiujesz miejsce docelowe napisów, dodając
po definicjach przedziałów czasu.
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. Być może chcesz
do użycia szarego gradientu liniowego jako tła
papayawhip dla wszystkich napisów i wszystkich pogrubionych tekstów 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 określaniu stylu i oznaczaniu tagami specyfikacja WebVTT jest dobrym źródłem zaawansowanych przykładów.
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łumaczenia mowy i tekstu w języku używać innego języka 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: niewidoczny i może być używany przez skrypty.
Wiesz już, jak udostępniać filmy w swojej witrynie, mogą się przydać bardziej złożone przypadki użycia. Więcej informacji o Streszty multimedialne i informacje o tym, jak mogą Ci pomóc w ich dodawaniu. wideo do swojej strony internetowej, udostępniając jednocześnie zaawansowane funkcje.