WebVTT הוא פורמט הכתוביות שדפדפן יודע לקרוא. והוא היחיד: חבר SRT לווידאו של HTML5 ולא יקרה כלום. לא שגיאה, לא אזהרה, לא כתובית.
הסיומת שלו היא .vtt, ומבפנים הוא דומה מאוד ל‑SRT. שלושה דברים משתנים: יש לו כותרת חובה, הוא שם נקודה איפה ש‑SRT שם פסיק, והוא יודע לבטא הרבה יותר ממה ש‑SRT מסוגל.
מה יש בפנים
WEBVTT
1
00:00:04.120 --> 00:00:06.480
לפני שנכנסים למספרים,
בואו נראה איפה אנחנו.
2
00:00:06.600 --> 00:00:09.000 line:90% align:start
מה שלא ציפיתי לו
זו הירידה של השבוע השני.
השורה הראשונה חייבת לומר WEBVTT. אם היא לא מופיעה, אם סימן סדר בתים נדחק לפניה, או אם שורה ריקה מקדימה אותה, הדפדפן נפטר מכל הקובץ.
משם והלאה, אותם בלוקים כמו קודם. עם שני הבדלים שרואים במבט: הנקודה לפני המילישניות, והאפשרות להוסיף הגדרות בסוף שורת הזמן.
מה הוא מוסיף על SRT
מיקום ויישור. line:90% מוריד את הכתובית, align:start מצמיד אותה לתחילת השורה ו‑position:20% מזיז אותה הצידה. שימושי כדי לא לכסות כיתוב שכבר נמצא בתמונה.
עיצוב. בלוק STYLE עם CSS אמיתי בראש הקובץ, ומחלקות שזרועות בטקסט דרך <c.narrator>. צבעים, גדלים, צללים.
מי מדבר. תגית <v מרתה>שלום</v> היא הדרך לסמן את הדובר. נגנים שיודעים לזהות אותה יכולים לצבוע אותה בצבע אחר; האחרים מתעלמים ממנה. בראיון או בפגישה, זה ההבדל בין גוש טקסט לבין טקסט קריא.
אזורים והערות. בלוקים של NOTE שומרים הערות שאף אחד לא רואה, ו‑REGION תוחם אזורים במסך עם גלילה משלהם, כמו כיתובים שעולים בשידור חי.
מזהי בלוקים. מעל שורת הזמן, כל בלוק מקבל שם — intro, question-3 — כדי להצביע עליו מ‑JavaScript.
מתי צריך VTT
בכל פעם שהווידאו מתנגן בדפדפן. אם בדף שלך יש <video> עם <track>, הקובץ הזה חייב להיות WebVTT:
<video controls>
<source src="reunion.mp4" type="video/mp4" />
<track src="reunion.vtt" kind="subtitles" srclang="he" label="עברית" default />
</video>
וכך גם עם נגני הרשת של היום (Video.js, Plyr, Shaka) ועם שידור HLS, שמחלק את הכתוביות כמקטעים של WebVTT.
מחוץ לדפדפן, כמעט אף אחד לא מבקש אותו: עורכי וידאו שולחניים, הנגנים שכולם השתמשו בהם תמיד ורוב טופסי ההעלאה עדיין מחכים ל‑SRT.
שתי תקלות שאינן באשמת הקובץ
השרת חייב להגיש אותו כ‑text/vtt. אם הוא נשלח כ‑text/plain או כ‑application/octet-stream, חלק מהדפדפנים דוחים אותו. זה נפתר בהגדרות השרת, אף פעם לא בקובץ.
והוא צריך להגיע מאותו מקור, או לשאת CORS. קובץ .vtt שמתארח בדומיין אחר בלי הכותרת Access-Control-Allow-Origin לא נטען לעולם, גם אם הכתובת עובדת מצוין כשפותחים אותה ידנית. זו הסיבה מספר אחת לתקלה הנפוצה «הווידאו מתנגן, הכתוביות לא».
אף אחד מהשניים אינו בעיית תוכן ואף אחד לא משאיר שגיאה גלויה בדף. הם מופיעים בלשונית הרשת בכלי הדפדפן, ורק אם אתה יודע שצריך להסתכל שם.
להמיר אותו
הדרך מ‑SRT ל‑VTT פשוטה: להוסיף כותרת, להחליף את הפסיק בנקודה, ולקודד את התווים & ו‑< ש‑SRT שומר כטקסט וש‑WebVTT היה מפרש כתגיות. ממיר SRT ל‑VTT שלנו פותר את שלושתם בדפדפן שלך, בלי שהקובץ ייצא ממנו.
בכיוון ההפוך, כל מה ש‑SRT לא יודע לומר נשאר בחוץ — מיקום, עיצוב, אזורים — ולכן ממיר VTT ל‑SRT משמיט אותם והופך את תגיות הדובר ל«מרתה:» בתחילת השורה, הדרך שבה SRT יודע להציג את זה. מה לבחור ולמה.
אם מה שיש לך הוא הווידאו ולא הכתוביות
העלה אותו ונחזיר לך את התמלול עם חותמות זמן, כל דובר מזוהה בשמו, וסיכום. אפשר להוריד ממנו VTT מוכן, עם הדוברים מסומנים. בלי חשבון כדי להתחיל.