מה זה WebVTT?

WebVTT (Web Video Text Tracks Format) הוא פורמט כתוביות מבוסס טקסט המשמש להוספת מסילות טקסט מתוזמן לסרטונים. זהו הפורמט הרשמי הנתמך על‑ידי HTML5 דרך אלמנט <track>, המאפשר לך להוסיף:

• כתוביות (דיבור מתורגם)
• כיתוב (דיבור ואפקטים קוליים)
• תיאורים (מידע חזותי לקוראי מסך)
• פרקים (נקודות ניתנות לניווט בווידאו)
• נתוני מטא

מבנה בסיסי של WebVTT

• קובץ WebVTT מורכב מ‑:
  • כותרת (header) אופציונלית (WEBVTT).
  • מטא‑נתונים אופציונליים (הערות או בלוקי style/script).
  • קיוים (Cues) (קטעי טקסט עם תזמון ותוכן).

1. פורמט קיו

קיו בעל המבנה הבא:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [cue settings]
Text payload...

• תזמון: זמני התחלה וסיום בפורמט HH:MM:SS.mmm.
• הגדרות (אופציונלי):
  • vertical (lr/rl לטקסט אנכי)
  • line (מיקום)
  • position (יישור אופקי)
  • size (רוחב/אחוזים)
  • align (start/middle/end)

2. תוכן קיו

• יכול להיות טקסט פשוט או לכלול סימון:
  • תגיות: <b>, <i>, <u>, <ruby>, <lang> וכו'.
  • חותמות זמן (<00:00:05.000>) לטקסט בסגנון קריוקי.

3. עיצוב ו‑CSS

• ניתן להחיל עיצוב דרך:
  • קיוים משולבים (באמצעות תגיות).
  • אלמנטים מזויפים של CSS (::cue, ::cue-region) ב‑HTML.

4. מסילות מטא‑נתונים

WebVTT יכול לשאת מטא‑נתונים (JSON וכו’) ליישומים אינטראקטיביים.

5. קידוד קובץ

• חייב להיות מקודד ב‑UTF-8.
• שורות מסתיימות ב‑\r\n, \n, או \r.

6. כללי עיבוד

• הפרסרים חייבים להתמודד עם קבצים פגומים בצורה חלקה.
• BOM (סימן סדר בתים) הוא אופציונלי.

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 מול SRT: מה ההבדל?

כלים ליצירה ועריכה של קבצי 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 (מבוסס רשת)

פתיחה בדפדפן

1. צור קובץ HTML פשוט עם תגיות <video> ו‑<track>.
2. פתח את קובץ ה‑HTML בדפדפן כדי לצפות בווידאו עם כתוביות.

מאפיינים מרכזיים של קבצי ASS

שאלות נפוצות

שאלה 1: מה ההבדל בין WebVTT ל‑SRT?
תשובה: WebVTT מבוסס על SRT אך מוסיף תכונות קריטיות כגון מיקום טקסט, תגיות קול, עיצוב CSS, ותמיכה במטא‑נתונים, בנוסף אינטגרציה מובנית עם וידאו HTML5.

שאלה 2: איך מוסיפים כתוביות WebVTT ל‑YouTube?
תשובה: העלה את קובץ ה‑.vtt שלך בעת הוספת כתוביות לסרטון, או השתמש בתמלול האוטומטי של YouTube והורד את קובץ WebVTT שנוצר לעריכה.

שאלה 3: האם קבצי WebVTT יכולים לכלול תמונות?
תשובה: המפרט של WebVTT אינו תומך ישירות בתמונות משולבות, אך ניתן להשתמש בקיוים של מטא‑נתונים עם כתובות URL וליישם הצגת תמונות מותאמת באמצעות JavaScript.

שאלה 4: למה העיצובים של WebVTT שלי לא מתבצעים?
תשובה: ודא שבלוקי STYLE מופיעים לפני הקיו הראשון, שאין בהם שורות ריקות, ושאתה משתמש נכון באלמנט המזויף ::cue. כמו כן, בדוק תאימות לדפדפן.

שאלה 5: האם קבצי WebVTT עובדים עם פרוטוקולי הזרמה כמו HLS?
תשובה: כן, HLS (HTTP Live Streaming) תומך ב‑WebVTT מחולק ל‑segments לצורך הזרמת כתוביות יעילה יחד עם תוכן הווידאו.

מקורות

• WebVTT: פורמט Web Video Text Tracks