Πώς να προσθέσετε υπότιτλους VTT σε βίντεο HTML5

Αν το βίντεο παίζει χωρίς κείμενο, ελέγξτε χωριστά τη φόρτωση του αρχείου και τον χρόνο εμφάνισης μιας γνωστής φράσης.

Συνδέστε το αρχείο

Τοποθετήστε το βίντεο και το VTT με κωδικοποίηση UTF-8 στον ίδιο ιστότοπο. Βάλτε το track μέσα στο video. Η σχετική διαδρομή υπολογίζεται από τη σελίδα. Το srclang δηλώνει τη γλώσσα του κειμένου και όχι απαραίτητα του ήχου. Δώστε σαφή ετικέτα σε κάθε γλώσσα.

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

Δοκιμάστε ένα κομμάτι υποτίτλων σε απλή σελίδα

Κατεβάστε το βίντεο επίδειξης και το VTT. Τοποθετήστε τα δίπλα στη σελίδα HTML σε δοκιμαστικό διακομιστή με ονόματα lesson.mp4 και example-en.vtt. Ανοίξτε τη διεύθυνση ιστού ώστε να μην επηρεάσουν τη δοκιμή οι περιορισμοί των τοπικών αρχείων.

Το δείγμα περιλαμβάνει μόνο την ανακοίνωση του εργαστηρίου. Σταματήστε στο όγδοο δευτερόλεπτο και συγκρίνετε τη φράση. Στο δέκατο τρίτο πρέπει να έχει χαθεί. Αν παραμένει αφού κλείσετε τους υπότιτλους, ελέγξτε για δεύτερο κομμάτι ή κείμενο ενσωματωμένο στην εικόνα.

Ακολουθήστε το αίτημα όταν λείπει η επιλογή γλώσσας

Ανοίξτε την καρτέλα δικτύου, ανανεώστε τη σελίδα και επιλέξτε αγγλικά. Αν λείπει το αίτημα .vtt, εξετάστε το στοιχείο video της δημοσιευμένης σελίδας: ο επεξεργαστής ίσως αφαίρεσε το track κατά την αποθήκευση. Διαφορετικά συγκρίνετε την πλήρη διεύθυνση με τον φάκελο μεταφόρτωσης.

Διαβάστε την απόκριση. Πρέπει να αρχίζει με WEBVTT, κενή γραμμή και χρονικούς κώδικες. Ακόμη και σελίδα σύνδεσης μπορεί να επιστρέψει 200. Σε σφάλμα CORS δοκιμάστε το αρχείο στην ίδια προέλευση με τη σελίδα και μετά ελέγξτε την επιτρεπόμενη προέλευση και το crossorigin.

Βρείτε το σημείο μοντάζ από τη χρονική απόκλιση

Συγκρίνετε την έναρξη τριών χαρακτηριστικών φράσεων με τους χρόνους των υποτίτλων. Σταθερή απόκλιση δείχνει πιθανή αλλαγή στην εισαγωγή. Αν αργεί μόνο η τρίτη, αναζητήστε κόψιμο μετά τη δεύτερη. Αν η απόκλιση αυξάνεται, επιβεβαιώστε πρώτα την έκδοση του βίντεο.

Στη δημοσιευμένη σελίδα επιλέξτε κάθε γλώσσα, ελέγξτε μια φράση και κλείστε τους υπότιτλους. Συγκρίνετε τυχόν κείμενο που απομένει με την αρχική εικόνα. Στην αναφορά προβλήματος δώστε όνομα αρχείου, επιλεγμένο κομμάτι και χρόνο αναπαραγωγής.

Δείγμα ροής εργασίας

Αγγλική συνθετική φωνή με πρωτότυπο κείμενο της EasySub. Το παράδειγμα μεταφέρει το τρίτο τμήμα του αρχικού SRT σε VTT· δεν είναι νέα εξαγωγή ούτε επαγγελματική ανθρώπινη επιμέλεια.

WEBVTT

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

WebVTT · EN · Λήψη του βίντεο επίδειξης · Αρχικό SRT (αγγλικά)

Δοκιμάστε την εμφάνιση και την εξαφάνιση

Επιλέξτε English και μεταβείτε στο όγδοο δευτερόλεπτο. Στο δέκατο τρίτο η φράση πρέπει να έχει εξαφανιστεί. Ανοίξτε τη διεύθυνση του VTT: μια σελίδα σύνδεσης με κατάσταση 200 δεν είναι αρχείο υποτίτλων. Ελέγξτε τον τύπο text/vtt και, για διαφορετικό τομέα, το crossorigin και την απόκριση CORS.