Wygeneruj element track HTML
Albo wklej tekst napisów
Opcje
Napisy są dla widzów, którzy słyszą dźwięk i potrzebują słów — tłumaczenia albo tego samego języka zapisanego. Napisy dla niesłyszących są dla widzów, którzy go nie słyszą, więc niosą też to, co dźwięk mówi wszystkim innym: muzykę, drzwi, dzwoniący telefon. Ten sam plik może służyć obu celom, dlatego strona pyta, zamiast zgadywać, a wartości nie da się później zmienić z wnętrza elementu. Opisy, rozdziały i metadane nie są oferowane: żadnego z nich nie da się wypełnić zawartością pliku z napisami.
Krótki znacznik języka, taki jak en, en-GB albo pt-BR, nazywający język słów w napisach, a nie język wideo. Ścieżka, która nazywa się napisami, musi podać język, więc wyczyszczenie tego pola daje powrót do en, a nie usunięcie atrybutu — a ponieważ każdy atrybut jest wypisywany w wyniku, widzisz to ustawienie zapasowe, zanim cokolwiek wkleisz.
Dowolny tekst: English, English (SDH), Français. To wiersz, z którego wybiera widz, gdy strona oferuje więcej niż jedną ścieżkę, więc zapisz go tak, jak rozpozna go twoja publiczność. Wyczyszczenie pola usuwa atrybut całkowicie, zamiast zapisywać pusty, co oddaje nazywanie odtwarzaczowi; pusta etykieta wstawiłaby do tego menu wiersz bez nazwy.
Włączone, napisy pojawiają się, gdy tylko wideo zaczyna grać. Element multimedialny może mieć tylko jedną domyślną ścieżkę, więc zostaw to wyłączone, gdy strona już taką ma: druga ścieżka ogłaszająca się jako domyślna sprawia, że odtwarzacze wybierają niewłaściwą, a brak domyślności oznacza tylko, że widz włącza ją sam.
W jakiej liczbie klatek na sekundę liczone są czasy. Na stronach formatów tego wymaga MicroDVD, bo zapisuje czasy jako numery klatek. Na stronach poświęconych liczbie klatek jest to stawka, według której zgrany był plik — wersja, dla której powstały napisy — a drugie pole na stronie przyjmuje liczbę klatek wideo, z którym napisy będą używane. Najczęstsze wartości to 23,976, 24, 25, 29,97, 30, 50, 59,94 i 60. Pomyłka przesuwa całą oś czasu, a na stronach poświęconych liczbie klatek przesuwa ją o współczynnik, a nie o stałą wartość.
Ta strona wkłada napisy w jeden element HTML, który możesz wkleić do swojej strony. W wyniku powstaje pojedyncza linia `<track>` z WebVTT wpisanym w atrybut `src`, więc tekst napisów podróżuje razem ze znacznikiem: nie ma drugiego pliku do wgrania, ścieżki do poprawienia ani sposobu, w jaki odtwarzacz mógłby szukać czegoś, czego nie ma.
To wbudowanie jest całym sensem tej strony i wynika ze sposobu, w jaki przeglądarki traktują pliki lokalne. Element track jest pobierany, a nie rysowany, a przeglądarka odmawia tego pobrania, gdy sama strona została otwarta z dysku. Dlatego `<track src="film.vtt">` na stronie zapisanej na pulpicie nie pokaże niczego: żadnego błędu na ekranie, pustego menu napisów i jednej linii w konsoli, której większość ludzi nigdy nie otwiera. URI `data:` nigdy nie jest pobierany — tekst siedzi w atrybucie — więc tam działa. Ceną jest rozmiar, bo każda spacja i każdy koniec wiersza WebVTT zamieniają się w trzy znaki, ale ta cena jest tutaj warta zapłaty: element istnieje właśnie po to, żeby działał sam.
Atrybuty pochodzą z pól na panelu, bo żadnego z nich nie da się odczytać z twojego pliku. Najważniejszy jest `kind`: subtitles to tłumaczenie dla widzów, którzy nie rozumieją audio, a captions to pełniejsza wersja, która niesie też muzykę i efekty dźwiękowe dla widzów, którzy nie słyszą. Plik pełen `[trzask drzwi]` i nut może być jednym i drugim, a tylko ty wiesz, dla jakiej publiczności powstał — dlatego strona pyta, zamiast zgadywać. Pozostałe trzy pola to język tekstu, nazwa widoczna w menu napisów odtwarzacza i to, czy ścieżka ma otwierać się sama.
Dwa z tych pól zachowują się inaczej po wyczyszczeniu i warto znać tę różnicę. Wyczyszczenie nazwy w menu usuwa atrybut całkowicie, bo etykieta jest opcjonalna, a jej brak po prostu oddaje wybór odtwarzaczowi. Wyczyszczenie pola języka tego nie robi: ścieżka, która przedstawia się jako napisy, musi wskazać język, więc puste pole daje w wyniku `en`, a nie element pozbawiony czegoś obowiązkowego. Ani jedno, ani drugie nie jest cichym podstawieniem — wynik wypisuje każdy atrybut, więc widzisz, co dały twoje pola.
Tekst napisów w elemencie zapisuje ten sam piszący WebVTT, którego używają strony konwersji. Plik, który przyszedł jako WebVTT, zachowuje więc wszystko, co niósł poza swoimi blokami: tekst w linii `WEBVTT`, bloki komentarzy i stylów oraz ustawienia poszczególnych bloków, które decydują, gdzie linia stoi na ekranie. W twoim pliku nic się nie zmienia i nic nie jest wysyłane; słowa, czasy i styl wychodzą w takim stanie, w jakim przyszły.
Przykłady
Plik SRT z domyślnymi polami
Wejście
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
Wynik
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
Jedna linia na wyjściu, a w niej cały plik: %0A to koniec wiersza, a %20 to spacja, więc WebVTT jedzie w atrybucie src zamiast leżeć w pliku obok strony. Cztery atrybuty to cztery pola — język tekstu, wiersz, który widz wybiera w menu napisów odtwarzacza, oraz default, dzięki któremu ścieżka otwiera się sama. Numery bloków z pliku SRT zostają jako identyfikatory bloków.
Plik WebVTT wychodzi jako ten sam WebVTT
Wejście
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
Wynik
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
Wszystko, co plik WebVTT trzyma poza blokami, przeżywa: uwaga w linii WEBVTT, blok NOTE, blok STYLE decydujący o wyglądzie napisów w odtwarzaczu, linia nazwy bloku i ustawienie bloku align:start position:10% (%25 to znak procentu, zakodowany, bo goły procent w URI nie jest dozwolony). Plik, który przyszedł jako WebVTT, wychodzi jako ten sam WebVTT. Dwa pola mówią en-GB i English (UK), bo ta kopia powstała dla brytyjskiej publiczności — nic w pliku tego nie mówiło.
Napisy dla widzów, którzy nie słyszą
Wejście
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
Wynik
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
Plik jest pełen efektów dźwiękowych i muzyki, a właśnie do tego służy kind="captions", czyli napisy dla widzów, którzy nie słyszą; tylko pole może to powiedzieć. Osobno: nazwa w menu została wpisana jako Tom & „the boss” i wychodzi jako `Tom & "the boss"` — nieescapowany cudzysłów zamknąłby atrybut w tym miejscu i zamienił resztę nazwy w resztki atrybutów elementu.
Trzy pola wyczyszczone lub wyłączone
Wejście
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
Wynik
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
Zmieniono trzy pola i powstały trzy różne wyniki, bo HTML wymaga różnych rzeczy. Nazwy w menu nie ma już w elemencie — jest opcjonalna, a jej brak oddaje decyzję odtwarzaczowi. Pole języka jest puste, a mimo to daje srclang="en": ścieżka ogłaszająca się jako napisy musi wskazać język, więc pusta nie istnieje, a wartość zastępcza jest widoczna w wyniku. Przełącznik default jest wyłączony i tego atrybutu też nie ma, więc ta ścieżka nie otworzy się sama — to bezpieczny kierunek, gdy strona niesie więcej niż jedną.
Częste pytania
Czy po generatorze elementu track nadal potrzebny jest plik .vtt obok strony?
Nie, i na tym polega ta strona. WebVTT jest wpisany w atrybut src jako URI data:, więc element niesie własne napisy. Możesz wkleić go do strony, wysłać plik mailem albo przenieść do innego katalogu, a napisy nadal się pojawią. Na jedno trzeba uważać: całość jest jednym atrybutem. Jeśli skopiujesz tylko część tej długiej linii, rozbijesz URI i ścieżka będzie pusta.
Czy element track zadziała, gdy otworzę plik HTML z własnego komputera?
Tak, i właśnie ten przypadek jest powodem, dla którego generator wbudowuje napisy. Gdy strona jest otwarta z dysku, przeglądarka odmawia pobrania osobnego pliku ścieżki, więc track wskazujący na film.vtt nie pokazałby niczego — bez widocznego błędu, tylko puste menu napisów. URI data: nie jest w ogóle pobierany, tekst już jest w atrybucie, więc działa tak samo na pulpicie jak na serwerze.
Dlaczego element track z wbudowanym WebVTT jest znacznie dłuższy niż mój plik z napisami?
Bo każdy znak, który nie jest literą ani cyfrą, zamienia się w URI na trzy znaki — spacja to %20, a koniec wiersza to %0A. Plik stu kilobajtów robi się kilkusetkilobajtowy. Base64 byłby krótszy, około jednej trzeciej więcej niż oryginał zamiast dwóch razy, ale dałby ścianę nieczytelnych znaków; tak jak jest, w atrybucie src rozpoznasz własny dialog, a to warte dodatkowego rozmiaru w pliku, który wklejasz do strony i utrzymujesz ręcznie.
Dlaczego po wyczyszczeniu pola w generatorze znika atrybut label?
Bo nazwa w menu jest w HTML opcjonalna, a jej brak nie znaczy „brak nazwy” — znaczy, że odtwarzacz sam zdecyduje, co pokazać w menu napisów, zwykle język. Wyczyszczenie pola usuwa więc atrybut zamiast zapisywać pusty, bo label="" pokazałby się jako pusty wiersz w tym menu. Możesz w każdej chwili wpisać nazwę z powrotem; to zwykły ciąg znaków i nic innego na stronie od niego nie zależy.
Czym różni się kind="subtitles" od kind="captions" w tym generatorze elementu track?
Odbiorcą. Subtitles zakłada, że widz słyszy audio i potrzebuje słów przetłumaczonych lub zapisanych; captions zakłada, że widz nie słyszy, więc niosą też to, co do słyszącego odbiorcy dociera dźwiękiem — muzykę, drzwi, dzwoniący telefon. Ten sam plik może służyć obu celom, a tekst jest w obu ten sam, więc strona nie potrafi odgadnąć, o który ci chodzi. W samym elemencie nie da się tego później zmienić, więc wybierz ten, którego potrzebuje twoja publiczność.
Które rodzaje ścieżek pominął generator elementu track?
Trzy: descriptions, które opisują obraz widzom, którzy go nie widzą; chapters, czyli nawigację, a nie napisy — na tej witrynie mają własną stronę; oraz metadata, których nikomu się nie pokazuje. Żadnego z tych trzech nie da się wypełnić zawartością pliku z napisami, więc ich oferowanie pozwoliłoby zbudować element, który niczego nie wyświetla. Oferowane są dwa rodzaje, którym plik z napisami naprawdę może służyć.
Czy generator elementu track zmienia cokolwiek w moich napisach?
Tekst, czasy i styl pozostają bez zmian, a plik WebVTT zachowuje własne bloki komentarzy, stylów i regionów oraz ustawienia poszczególnych bloków. Zmienia się kształt: linie są zapisane w składni WebVTT, bo to czytają odtwarzacze, więc przecinek w 00:00:01,000 z pliku SRT staje się kropką. Jeden bajt znika celowo — znacznik na początku mówiący, że plik jest w UTF-8, bo URI data: sam podaje kodowanie, a znacznik pojawiłby się inaczej jako trzy zbłąkane znaki na początku.