Poprawna struktura WebVTT
Każdy plik zaczyna się nagłówkiem WEBVTT i ma kropkę przed milisekundami – dwa szczegóły, które łatwo przeoczyć przy ręcznej konwersji.
Twórz napisy WebVTT do wideo w internecie – ze sprawdzonej transkrypcji.
AutoCap transkrybuje wideo, pozwala poprawić każde słowo i każdy czas, a potem zapisuje poprawny plik .vtt z gotowym nagłówkiem WEBVTT.
Bez karty płatniczej · 2 darmowe minuty co miesiąc · eksport MP4, SRT i VTT
WEBVTT 00:00:01.200 --> 00:00:03.400Plik napisów jest tyle wart, 00:00:03.400 --> 00:00:05.100ile jego czasy. 00:00:05.300 --> 00:00:07.050Te zostały sprawdzone.
WebVTT to format napisów, który czyta element track w HTML – a więc format rozumiany przez wbudowany odtwarzacz wideo w przeglądarce. Jeśli twoje wideo odtwarza się na własnej stronie albo w kursie online, to zwykle właśnie tego pliku potrzebujesz.
Plik VTT wygląda niemal jak SRT i właśnie z tego podobieństwa biorą się uszkodzone pliki: brakujący wiersz nagłówka albo przecinki, które zostały w znacznikach czasu po pospiesznym zamienianiu tekstu. AutoCap zapisuje oba te szczegóły poprawnie – na podstawie transkrypcji sprawdzonej wcześniej razem z wideo.
Pliki WebVTT zrobione pod przeglądarkę.
Czasy napisów ze sprawdzonych słów
Początek i koniec każdego napisu pochodzą ze sprawdzonej synchronizacji co do słowa, więc napisy pojawiają się razem z mową, a nie przed nią.
Gotowe pod element track
Podepnij plik przez element <track> w HTML5, a odtwarzacz przeglądarki pokaże napisy – bez żadnej wtyczki.
Plik SRT z tego samego projektu
Pobierz też plik SRT na YouTube albo do programu do montażu – jego słowa i czasy są dokładnie takie same jak w VTT.
Proste napisy, które możesz rozbudować
Napisy zapisujemy bez pozycjonowania i stylów, więc możesz dodać ustawienia cue albo CSS z ::cue pod swój odtwarzacz, niczego wcześniej nie cofając.
Utwórz plik VTT w czterech krokach.
- 01
Prześlij wideo źródłowe
Użyj pliku MP4 lub MOV – transkrybowana jest ścieżka dźwiękowa.
- 02
Sprawdź przy odtwarzaniu
Obejrzyj wideo z włączonymi napisami i popraw nazwy, liczby oraz źle usłyszane frazy.
- 03
Dopasuj granice napisów
Dziel lub łącz wiersze napisów, żeby w każdym napisie mieściła się czytelna fraza, i zmień czas każdego słowa, które się rozjeżdża.
- 04
Pobierz plik .vtt
W płatnym planie wyeksportuj plik WebVTT, a potem podepnij go do swojego odtwarzacza albo prześlij na swoją platformę.
Co zawiera plik WebVTT
WebVTT, czyli Web Video Text Tracks, to specyfikacja W3C. Plik jest zwykłym tekstem w UTF-8, który musi zaczynać się od słowa WEBVTT – po nim idzie pusty wiersz, a dalej seria napisów.
Każdy napis ma opcjonalny identyfikator, wiersz czasu i treść. Znaczniki czasu mają kropkę przed milisekundami i mogą pomijać godziny, a blok zaczynający się od NOTE to komentarz, którego widzowie nigdy nie zobaczą.
WEBVTT NOTE Cue identifiers are optional 00:00:01.200 --> 00:00:03.400 Web players read this format natively. 00:00:03.600 --> 00:00:05.900 The header line always comes first.
Ustawienia cue i style ::cue
WebVTT potrafi rozmieścić napisy i nadać im styl tak, jak SRT nie umie. Po znacznikach czasu w wierszu czasu opcjonalne ustawienia napisu (cue settings) sterują układem: line przesuwa napis w górę lub w dół kadru, position i size ustalają, gdzie w poziomie leży jego ramka i jak jest szeroka, a align ustawia wyrównanie tekstu w tej ramce.
Style należą do CSS. Pseudoelement ::cue pozwala stronie ustawić kolor, tło i czcionkę napisów w jej odtwarzaczu wideo, a ::cue() z selektorem trafia w pojedyncze napisy.
AutoCap zapisuje proste napisy i zostawia rozmieszczenie odtwarzaczowi. Jeśli twoja strona tego potrzebuje, dodaj ustawienia lub CSS ręcznie.
- line:10% – podnosi napis blisko górnej krawędzi wideo
- position:20% – przesuwa ramkę napisu w lewo
- size:50% – zwęża ramkę napisu do połowy szerokości wideo
- align:start – wyrównuje tekst do początku każdego wiersza
video::cue {
color: #ffffff;
background-color: rgb(0 0 0 / 0.7);
font-family: system-ui, sans-serif;
}Kiedy potrzebujesz właśnie pliku VTT
Sięgaj po WebVTT zawsze, gdy napisy wczytuje przeglądarka. Wideo HTML5 na własnym serwerze przyjmuje je przez element track, jak w poniższym fragmencie kodu, a odtwarzacze zbudowane na tym elemencie zwykle też go oczekują.
Gdzie indziej to zwykle jedna z kilku opcji. Canvas Studio przyjmuje napisy zarówno w SRT, jak i w VTT, a YouTube wymienia WebVTT wśród obsługiwanych formatów, choć na stronach pomocy poleca początkującym SRT.
Masz już plik SRT? Przekonwertuj go, zamiast generować napisy od nowa.
<video controls src="lesson.mp4"> <track kind="captions" src="lesson.vtt" srclang="en" label="English" default> </video>
Warto wiedzieć.
Czym jest plik VTT?
Plik WebVTT (.vtt) to tekstowy plik napisów do wideo w internecie. Zaczyna się nagłówkiem WEBVTT, zawiera listę napisów z czasami i jest formatem, którego używa element track w HTML.
Czy plik VTT zawiera ustawienia pozycji lub stylów?
Nie. AutoCap zapisuje standardowe napisy z dokładnymi czasami i bez ustawień pozycji, więc każdy odtwarzacz stosuje własny styl napisów, chyba że sam dodasz ustawienia cue albo CSS.
Dlaczego mój plik VTT nie wyświetla się w przeglądarce?
Sprawdź, czy pierwszy wiersz to dokładnie WEBVTT i czy znaczniki czasu mają kropki, a nie przecinki. Plik hostowany w innej domenie niż strona potrzebuje dodatkowo nagłówków CORS i atrybutu crossorigin na elemencie video.
Czy mogę dostać plik VTT za darmo?
Pobieranie plików VTT jest dostępne w każdym płatnym planie, od $9 miesięcznie. Jeśli masz już plik SRT, konwerter SRT na VTT jest darmowy i działa w przeglądarce.
Czy mogę zamienić plik VTT z powrotem na SRT?
Tak. Pobierz plik SRT z tego samego projektu w płatnym planie albo przepuść plik VTT przez darmowy konwerter VTT na SRT.
Wypróbuj przy następnym filmie, który publikujesz.
Darmowy plan nie wymaga karty płatniczej. Prześlij klip, sprawdź napisy na własne oczy, a na wyższy plan przejdź dopiero wtedy, gdy zechcesz usunąć znak wodny.