Αρχείο WebVTT - Web Video Text Tracks - Τι είναι το αρχείο WebVTT και πώς να το ανοίξετε;

Τι είναι το WebVTT;

WebVTT (Web Video Text Tracks Format) είναι μια μορφή υποτίτλων βασισμένη σε κείμενο που χρησιμοποιείται για την προσθήκη χρονισμένων κειμενικών 轨道 σε βίντεο. Είναι η επίσημη μορφή που υποστηρίζεται από το HTML5 μέσω του στοιχείου <track>, επιτρέποντας την προσθήκη:

Υπότιτλοι (μετάφραση ομιλίας)
Λεζάντες (ομιλία και ηχητικά εφέ)
Περιγραφές (οπτικές πληροφορίες για προγράμματα ανάγνωσης οθόνης)
Κεφάλαια (σημεία πλοήγησης στο βίντεο)
Μεταδεδομένα

Βασική Δομή του WebVTT

Ένα αρχείο WebVTT αποτελείται από:
- Ένα προαιρετικό header (WEBVTT).
- Προαιρετικά μεταδεδομένα (σχόλια ή μπλοκ στυλ/σκριπτ).
- Cues (τμήματα κειμένου με χρονισμό και περιεχόμενο).

1. Μορφή Cue

Ένα cue έχει την ακόλουθη δομή:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [ρυθμίσεις cue]
Κείμενο περιεχομένου...

Χρονισμός: Ώρες έναρξης & λήξης σε μορφή HH:MM:SS.mmm.
Ρυθμίσεις (προαιρετικές):
- vertical (lr/rl για κάθετο κείμενο)
- line (τοποθέτηση)
- position (οριζόντια στοίχιση)
- size (πλάτος/ποσοστό)
- align (start/middle/end)

2. Περιεχόμενο Cue

Μπορεί να είναι απλό κείμενο ή να περιλαμβάνει σήμανση:
- Ετικέτες: <b>, <i>, <u>, <ruby>, <lang> κ.λπ.
- Χρονικές σήμανσεις (<00:00:05.000>) για στυλ καραόκε.

3. Στυλ & CSS

Το στυλ μπορεί να εφαρμοστεί μέσω:
- Inline cues (χρήση ετικετών).
- CSS ψευδο-στοιχείων (::cue, ::cue-region) στο HTML.

4. Μεταδεδομένα

Το WebVTT μπορεί να μεταφέρει μεταδεδομένα (JSON κ.λπ.) για διαδραστικές εφαρμογές.

5. Κωδικοποίηση Αρχείου

Πρέπει να είναι κωδικοποιημένο σε UTF-8.
Οι γραμμές λήγουν με \r\n, \n ή \r.

6. Κανόνες Επεξεργασίας

Οι αναλυτές πρέπει να διαχειρίζονται εσφαλμένα αρχεία με χάρη.
Το BOM (Byte Order Mark) είναι προαιρετικό.

7. Ενσωμάτωση σε HTML5

Χρησιμοποιείται με το στοιχείο <track>:
```
<video>
  <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
</video>
```
- Η ιδιότητα kind μπορεί να είναι subtitles, captions, descriptions, chapters ή metadata.

8. Υποστήριξη από Προγράμματα Περιήγησης

Υποστηρίζεται ευρέως σε σύγχρονα προγράμματα περιήγησης (Chrome, Firefox, Safari, Edge).

9. Περιπτώσεις Χρήσης

Υπότιτλοι/Λεζάντες για προσβασιμότητα.
Στίχοι καραόκε με χρονισμένο κείμενο.
Πλοήγηση κεφαλαίων σε βίντεο.
Μεταδεδομένα για διαδραστικές εφαρμογές βίντεο.

Παράδειγμα Αρχείου WebVTT:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our tutorial on WebVTT.

00:00:04.000 --> 00:00:08.000
In this video, you'll learn how to add subtitles to your HTML5 videos.

Οι μηχανές αναζήτησης δεν μπορούν να «δουν» το βίντεό σας — αλλά μπορούν να διαβάσουν περιεχόμενο βασισμένο σε κείμενο. Χρησιμοποιώντας αρχεία WebVTT, προσθέτετε κείμενο που μπορεί να ευρετηριαστεί, το οποίο:

Βελτιώνει την ανακάλυψη: Η Google μπορεί να ευρετηριάσει λεζάντες και μεταγραφές, κάνοντας τα βίντεό σας πιο εμφανή σε αποτελέσματα αναζήτησης.
Αυξάνει την αλληλεπίδραση: Τα βίντεο με υπότιτλους κρατούν τους χρήστες περισσότερο ενεργούς — αυξάνοντας τη διάρκεια συνεδρίας και μειώνοντας τα ποσοστά εγκατάλειψης.
Ενισχύει την προσβασιμότητα: Η προσθήκη λεζάντων είναι απαραίτητη για άτομα με κώφωση ή προβλήματα ακοής και λαμβάνει προτεραιότητα στους αλγόριθμους SEO.

Όταν ένα αρχείο WebVTT συνδέεται με ένα βίντεο σε μια ιστοσελίδα, η Google μπορεί να αναλύσει και να κατανοήσει το χρονισμένο κείμενο, καθιστώντας το περιεχόμενο πιο σχετικό για συγκεκριμένα ερωτήματα.

Πώς να Προσθέσετε WebVTT σε Βίντεο HTML5

Μπορείτε να ενσωματώσετε ένα αρχείο WebVTT στο βίντεό σας χρησιμοποιώντας το στοιχείο <track>:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

src: Διαδρομή προς το αρχείο .vtt
kind: Τύπος κειμενικού 轨道 (subtitles, captions, chapters, κ.λπ.)
srclang: Κωδικός γλώσσας (π.χ. en, es)
label: Ετικέτα 轨道 που εμφανίζεται στον αναπαραγωγέα

WebVTT vs SRT: Ποια είναι η Διαφορά;

Χαρακτηριστικό	WebVTT	SRT (SubRip)
Μορφή	Χρησιμοποιείται σε βίντεο HTML5	Χρησιμοποιείται σε εργαλεία επεξεργασίας βίντεο
Στυλ	Υποστηρίζει στυλ CSS	Δεν υποστηρίζει στυλ
Μεταδεδομένα	Υποστηρίζει μεταδεδομένα cue	Δεν υποστηρίζεται
Συμβατότητα	Ευρέως υποστηρίζεται σε browsers	Υποστηρίζεται σε προγράμματα όπως VLC

Εργαλεία για Δημιουργία και Επεξεργασία Αρχείων WebVTT

Μπορείτε να δημιουργήσετε ή να επεξεργαστείτε αρχεία .vtt χρησιμοποιώντας:

Επεξεργαστές κειμένου: VS Code, Sublime Text
Επεξεργαστές υποτίτλων: Subtitle Edit, Amara, Aegisub
Μετατροπείς: Χρησιμοποιήστε εργαλεία για μετατροπή SRT σε VTT και αντίστροφα

Πώς να ανοίξετε αρχείο WebVTT;

Για να ανοίξετε ένα αρχείο WebVTT (.vtt), μπορείτε να χρησιμοποιήσετε οποιονδήποτε επεξεργαστή κειμένου ή επεξεργαστή υποτίτλων.

Άνοιγμα σε Επεξεργαστή Κειμένου

Windows: Notepad, Notepad++, VS Code
macOS: TextEdit, Sublime Text
Linux: Gedit, nano, Vim

Επειδή τα αρχεία .vtt είναι απλό κείμενο, μπορείτε να τα προβάλετε και να τα επεξεργαστείτε όπως οποιοδήποτε άλλο αρχείο κειμένου.

Άνοιγμα σε Επεξεργαστή Υποτίτλων

Για καλύτερη μορφοποίηση, προεπισκόπηση και συγχρονισμό:

Subtitle Edit (Windows)
Aegisub (πλατφόρμες)
Amara (βασισμένο στον ιστό)

Άνοιγμα σε Πρόγραμμα Περιήγησης

Δημιουργήστε ένα απλό αρχείο HTML με ετικέτες <video> και <track>.
Ανοίξτε το αρχείο HTML σε πρόγραμμα περιήγησης για να δείτε το βίντεο με υπότιτλους.

Βασικά Χαρακτηριστικά Αρχείων ASS

Χαρακτηριστικό	Περιγραφή
Επέκταση Αρχείου	.vtt
Πλήρες Όνομα	Web Video Text Tracks Format
MIME Type	text/vtt
Τύπος Μορφής	Αρχείο απλού κειμένου με δομημένη σήμανση
Κύριο Λογισμικό	Οποιοσδήποτε επεξεργαστής κειμένου, προγράμματα αναπαραγωγής βίντεο HTML5, εργαλεία δημιουργίας λεζάντων
Κωδικοποίηση	Απαιτείται UTF-8
Αναπτύχθηκε από	W3C (World Wide Web Consortium) και WHATWG
Κύριο Πλεονέκτημα	Φυσική υποστήριξη από browsers, πλούσιες επιλογές τοποθέτησης και στυλ, χαρακτηριστικά προσβασιμότητας
Υποστήριξη Μακροεντολών	Όχι (μόνο κείμενο με ετικέτες σήμανσης)
Ανοιχτό Πρότυπο	Ναι (προδιαγραφή ομάδας κοινότητας W3C)

Συχνές Ερωτήσεις (FAQ)

Ε1: Ποια είναι η διαφορά μεταξύ WebVTT και SRT;
Α: Το WebVTT βασίζεται στο SRT αλλά προσθέτει κρίσιμες λειτουργίες όπως τοποθέτηση κειμένου, ετικέτες φωνής, στυλ CSS και υποστήριξη μεταδεδομένων, καθώς και ενσωμάτωση με HTML5 video.

Ε2: Πώς προσθέτω υπότιτλους WebVTT στο YouTube;
Α: Ανεβάστε το αρχείο .vtt όταν προσθέτετε υπότιτλους στο βίντεό σας ή χρησιμοποιήστε το αυτόματο σύστημα λεζάντων του YouTube και κατεβάστε το παραγόμενο αρχείο WebVTT για επεξεργασία.

Ε3: Μπορούν τα αρχεία WebVTT να περιλαμβάνουν εικόνες;
Α: Η προδιαγραφή WebVTT δεν υποστηρίζει άμεση ενσωμάτωση εικόνων, αλλά μπορείτε να χρησιμοποιήσετε cues μεταδεδομένων με URL και να υλοποιήσετε προσαρμοσμένη απόδοση εικόνων μέσω JavaScript.

Ε4: Γιατί δεν εφαρμόζονται τα στυλ μου στο WebVTT;
Α: Ελέγξτε ότι τα μπλοκ STYLE εμφανίζονται πριν από το πρώτο cue, δεν περιέχουν κενές γραμμές και χρησιμοποιούν σωστά το ψευδο-στοιχείο ::cue. Επίσης, βεβαιωθείτε ότι το πρόγραμμα περιήγησης υποστηρίζει τα στυλ.

Ε5: Λειτουργούν τα αρχεία WebVTT με πρωτόκολλα ροής όπως το HLS;
Α: Ναι, το HLS (HTTP Live Streaming) υποστηρίζει τμηματικά WebVTT για αποδοτική ροή λεζάντων παράλληλα με το βίντεο.

Αναφορές

WebVTT: The Web Video Text Tracks Format