במאמר זה תלמדו על הפורמט WebVTT (רצועות טקסט של סרטונים באינטרנט), שמשמש לתיאור נתוני טקסט מתוזמנים, כמו כתוביות כדי להפוך את הסרטונים לנגישים יותר לקהל שלכם.
נגישות היא לא כמו הציפוי על העוגה. אף פעם לא לוקחים שום דבר קצת תקווה, ותקווה שגם מאוחר יותר נוכל להציג אותו. כתוביות וקורא מסך תיאורים הם הדרך היחידה שבה משתמשים רבים יכולים לחוות את הסרטונים שלכם, סמכויות שיפוט, הן אפילו נדרשות על פי חוק או תקנה.
הוספת <track> תגים
כדי להוסיף כתוביות או תיאורים של קורא מסך לסרטון אינטרנט, צריך להוסיף <track>
בתוך תג <video>. בנוסף לכתוביות ולקורא מסך
תיאורים. ניתן להשתמש בתגי <track> גם לכתוביות ולשמות פרקים.
התג <track> גם יכול לעזור למנועי חיפוש להבין מה מוצג בסרטון.
עם זאת, המאמר הזה לא כולל את היכולות האלה.
התג <track> דומה לרכיב <source> בכך שלשניהם יש src
שמפנה לתוכן שיש אליו הפניה. עבור תג <track>, היא מפנה אל
קובץ WebVTT. המאפיין label מציין את המראה של טראק מסוים
שמזוהה בממשק.
כדי לספק מסלולים לכמה שפות, צריך להוסיף תג <track> נפרד לכל שפה
קובץ ה-WebVTT ששלחת ולציין את השפה באמצעות המאפיין srclang
.
למטה מוצג תג <video> לדוגמה עם שני תגי <track>. יש גם
טעימה שאפשר לצפות ב-Glitch (מקור).
צריך להוסיף רכיב <track> כצאצא של הרכיב <video>:
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
מבנה הקובץ WebVTT
לפניכם קובץ WebVTT היפותטי של ההדגמה שמקושרת למעלה. הקובץ הוא קובץ טקסט שמכיל סדרה של רמזים. כל סימן הוא בלוק של טקסט להצגה על המסך, ואת טווח הזמן שבמהלכו התמונה תוצג.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
כל פריט בקובץ הטראק נקרא סימן. לכל סימן יש שעת התחלה,
שעת הסיום מופרדת בחץ, עם טקסט של סימון בשורה שלמטה. סימנים יכולים
אופציונלי - הם כוללים גם מזהים כמו railroad ו-manuscript בדוגמה הבאה.
הסימנים מופרדים על ידי שורה ריקה.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
זמני הסימן הם בפורמט hours:minutes:seconds.milliseconds. הניתוח הוא קפדני.
כלומר, צריך למלא אפס מספרים במקרה הצורך: שעות, דקות ושניות
חייב להכיל שתי ספרות (00 לערך של אפס) ואלפיות שנייה חייבות להכיל שלוש
ספרות (000 לערך אפס). יש מאמת WebVTT מעולה
כלי לאימות WebVTT בזמן אמת, שבודק שגיאות בפורמט השעה, וגם
כמו זמנים לא רציפים.
אפשר ליצור קובץ VTT ידנית, מתוך מחשבה שיש הרבה שירותים ליצור אותן בשבילכם.
כפי שאפשר לראות בדוגמאות הקודמות, הפורמט WebVTT הוא די פשוט. פשוט מוסיפים את נתוני הטקסט יחד עם התזמונים.
עם זאת, מה אם רוצים שהכתוביות יוצגו במיקום אחר
יישור לימין או לשמאל? אולי כדי להתאים את הכתוביות לדובר הנוכחי
או לא להפריע לטקסט שמושמע במצלמה. WebVTT קובע הגדרות לעשות זאת,
ועוד, ישירות בתוך
קובץ .vtt. שימו לב איך מיקום הכתוביות מוגדר על ידי הוספת
לאחר ההגדרות של מרווח הזמן.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
תכונה שימושית נוספת היא האפשרות לעצב סימנים באמצעות CSS. אולי כדאי
להשתמש בשיפוע ליניארי אפור כרקע, עם צבע חזית של
papayawhip לכל הכתוביות ולכל הטקסט המודגש בצבע peachpuff.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
לקבלת מידע נוסף על עיצוב ותיוג של אנשים פרטיים מפרט WebVTT הוא מקור טוב לדוגמאות מתקדמות.
סוגי הטראקים של טקסט
האם הבחנת במאפיין kind של הרכיב <track>? משמש ל-
לציין את הקשר בין טראק הטקסט המסוים לבין הסרטון.
הערכים האפשריים של המאפיין kind הם:
captions: לכתוביות מתמלילים ואולי גם לתרגומים של אודיו כלשהו. מתאים ללקויי שמיעה ובמקרים שבהם הסרטון מושמע מושתק.subtitles: לכתוביות, כלומר תרגומים של דיבור וטקסט השפה הראשית של הסרטון.descriptions: לתיאורים של חלקים חזותיים של תוכן הסרטון. מתאים לאנשים עם ליקויי ראייה.chapters: מיועד להצגה כשהמשתמש מנווט בתוך וידאו.metadata: לא גלוי, ועשוי לשמש סקריפטים.
עכשיו, אחרי שהבנת את העקרונות הבסיסיים ליצירת סרטון לזמין ונגיש בדף האינטרנט שלכם, אתם עשויים לתהות לגבי תרחישים מורכבים יותר לדוגמה. בשלב הבא ללמוד על מסגרות מדיה ואיך הן יכולות לעזור לכם להוסיף סרטונים לדף האינטרנט שלך ובמקביל לספק תכונות מתקדמות.