Z tego artykułu dowiesz się więcej o formacie WebVTT (Web Video Text Tracks), który służy do opisywania danych tekstowych czasowych, np. napisów. dzięki czemu filmy będą bardziej przystępne dla widzów.
Ułatwienia dostępu nie są jak polerowanie tortu. To nigdy treści, które umieścisz na z zaległościami z nadzieją, że wprowadzimy je później. Napisy i czytnik ekranu opisy to jedyny sposób, w jaki wielu użytkowników może obejrzeć Twoje filmy. nawet jeśli wymagają tego przepisy lub regulacje.
Dodaj tagi: <track>
Aby dodać napisy lub opisy czytnika ekranu do filmu internetowego, dodaj <track>
w tagu <video>. Oprócz napisów i czytnika ekranu
opisów, tagi <track> mogą być też używane do tworzenia napisów i tytułów rozdziałów.
Tag <track> może też pomóc wyszukiwarkom w zrozumieniu, co znajduje się w filmie.
Nie obejmują one jednak tego artykułu.
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 będzie wyglądać dana ścieżka dźwiękowa
widoczne w interfejsie.
Aby zapewnić ścieżki dla wielu języków, dodaj osobny tag <track> do każdego z nich
Podany plik WebVTT i wskaż język w polu srclang
.
Poniżej pokazujemy przykładowy tag <video> z dwoma tagami <track>. Jest też
przykład, który możesz zobaczyć w Glitch (ź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 na potrzeby wersji demonstracyjnej, do której link podano powyżej. Ten plik 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 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 utworu jest nazywany wskazówką. Każda wzmiankę ma swoją godzinę rozpoczęcia i
czasu zakończenia rozdzielone strzałką, a tekst podpowiedzi w wierszu poniżej. Wskazówki mogą
opcjonalnie mają też 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.
Czasy wskazówek są 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 jest doskonały walidator WebVTT,
Live WebVTT Validator, który sprawdza błędy w formatowaniu czasu oraz
takie jak niesekwencyjne 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 wraz z czasami.
A co jeśli chcesz, by napisy były renderowane w innym miejscu –
wyrównanie do lewej czy do prawej? Możesz też dopasować napisy do obecnego mówcy.
w odpowiednim położeniu
i nie oddalać się od tekstu w kamerze. 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.
Kolejną przydatną funkcją jest możliwość dostosowania stylu wskazówek 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 element <track> zawiera atrybut kind? Zastosowanie:
wskazują związek konkretnej ścieżki tekstowej z filmem.
możliwe wartości atrybutu kind to:
captions: dotyczy napisów z transkrypcji i ewentualnie tłumaczeń jakiegokolwiek dźwięku. Odpowiednie dla osób niedosłyszących oraz w przypadku, gdy film jest odtwarzam z wyciszonym dźwiękiem.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: dotyczy opisów wizualnych części treści wideo. Odpowiednie dla osób z wadą wzroku.chapters: ma być wyświetlany, gdy użytkownik porusza się w 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. Teraz Dowiedz się więcej o schematach mediów i o tym, jak mogą Ci pomóc w ich dodawaniu. wideo do swojej strony internetowej, udostępniając jednocześnie zaawansowane funkcje.