Jak dodać ścieżkę VTT do filmu w HTML5

Gdy film się odtwarza, ale tekst się nie pojawia, sprawdź osobno wczytanie pliku i czas wyświetlenia konkretnej kwestii.

Podłącz ścieżkę

Umieść film i plik VTT zapisany w UTF-8 w tej samej witrynie. Wstaw track wewnątrz video. Ścieżka względna odnosi się do strony. srclang oznacza język tekstu, niekoniecznie nagrania. Każdej wersji nadaj czytelną etykietę.

<video controls src="lesson.mp4">
  <track kind="subtitles" src="example-en.vtt"
         srclang="en" label="English" default>
</video>

Przetestuj jedną ścieżkę na prostej stronie

Pobierz film demonstracyjny i VTT. Umieść je obok strony HTML na serwerze testowym pod nazwami lesson.mp4 i example-en.vtt. Otwórz adres internetowy strony, aby ograniczenia przeglądarki dla plików lokalnych nie zakłóciły testu.

Próbka zawiera tylko zapowiedź warsztatów. W ósmej sekundzie zatrzymaj film i porównaj napis. W trzynastej powinien już zniknąć. Jeżeli pozostaje po wyłączeniu ścieżki, sprawdź inne ścieżki i tekst wtopiony w obraz.

Prześledź żądanie, gdy lista napisów jest pusta

Otwórz kartę Sieć, odśwież stronę i wybierz angielski. Jeśli nie ma żądania .vtt, sprawdź element video na opublikowanej stronie. Edytor mógł usunąć track przy zapisie. Jeśli żądanie jest, porównaj pełny adres z katalogiem pliku.

Przeczytaj odpowiedź. Oczekiwane są WEBVTT, pusty wiersz i znaczniki czasu. Strona logowania również może zwrócić 200. Przy błędzie CORS przetestuj plik z tego samego źródła co strona, potem sprawdź dozwolone źródło i atrybut crossorigin.

Znajdź cięcie na podstawie przesunięcia

Porównaj początek trzech rozpoznawalnych kwestii z czasem napisów. Stała różnica wskazuje na zmianę czołówki. Jeżeli spóźnia się tylko trzecia kwestia, szukaj cięcia po drugiej. Gdy różnica narasta, najpierw upewnij się, którą wersję filmu odtwarza strona.

Na opublikowanej stronie wybierz kolejno każdy język i wyłącz napisy. Porównaj pozostały tekst z oryginalnym obrazem. W zgłoszeniu podaj nazwę filmu, wybraną ścieżkę i czas odtwarzania.

Przykład procesu

Angielski głos syntetyczny czyta autorski tekst EasySub. Przykład odtwarza trzeci wpis źródłowego SRT; nie jest nowym eksportem ani tekstem po profesjonalnej korekcie.

WEBVTT

3
00:00:07.950 --> 00:00:12.149
Our next workshop starts on June 15 at 9:30.

WebVTT · EN · Pobierz film demonstracyjny · Oryginalny SRT (angielski)

Przetestuj początek i koniec

Wybierz English i przejdź do ósmej sekundy. W trzynastej przykładowego zdania nie powinno już być. Otwórz adres VTT: strona logowania ze statusem 200 nie jest plikiem napisów. Sprawdź typ text/vtt, a przy innej domenie także crossorigin i odpowiedź CORS.