נגישות למדיה

Derek Herman
Derek Herman
Joe Medley
Joe Medley

תאריך פרסום: 20 באוגוסט 2020

כתוביות ותיאורים של קוראי מסך הם הדרך היחידה שבה משתמשים רבים יכולים לצפות בסרטונים שלכם, ובסמכויות שיפוט מסוימות הם נדרשים אפילו על פי חוק או תקנות. הפורמט WebVTT (רצועות טקסט של סרטוני אינטרנט) משמש לתיאור נתוני טקסט מתוזמנים, כמו כתוביות, כדי להפוך את הסרטונים שלכם לנגישים יותר.

הוספת תגי <track>

כדי להוסיף כתוביות או תיאורים לקורא מסך לסרטון באינטרנט, מוסיפים תג <track> בתוך תג <video>. נוסף לכתוביות ותיאורים של קורא המסך, אפשר להשתמש בתגי <track> גם לכתוביות ולשמות הפרקים.

צילום מסך שבו מוצגות כתוביות באמצעות רכיב הטראק ב-Chrome ל-Android.

התג <track> דומה לרכיב <source> בכך שלשניהם יש מאפיין src שמפנה לתוכן שיש הפניה אליו. בתג <track>, הוא מפנה לקובץ WebVTT. המאפיין label מציין איך אפשר לזהות טראק מסוים בממשק.

כדי לספק טראקים בכמה שפות, מוסיפים תג <track> נפרד לכל קובץ WebVTT שרוצים לספק, ומציינים את השפה באמצעות המאפיין srclang.

בדוגמה הבאה מוצג תג <video> עם שני תגי <track>. צריך להוסיף רכיב <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>

יש גם דוגמה שאפשר לצפות בה ב-Glitch.

מבנה הקובץ של 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.

...

כל פריט בקובץ הטראק הוא cue. לכל אות איתות יש שעה התחלה ושעת סיום, מופרדות בחץ, ואחריה טקסט של אות האיתות. לסמנים יכולים להיות גם מזהי קוד, כמו 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 בכתובת Live WebVTT Validator, שבודק שגיאות בפורמט הזמן ובעיות כמו זמני התחלה לא רצופים.

אפשר ליצור קובץ 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: לא גלוי, ועשוי לשמש סקריפטים.

עכשיו, אחרי שהבנתם את העקרונות הבסיסיים של הפיכת סרטון לזמין ולנגיש בדף האינטרנט שלכם, תוכלו לתהות לגבי תרחישי שימוש מורכבים יותר. כאן מוסבר על מסגרות מדיה ואיך הן יכולות לעזור לכם להוסיף סרטונים לדף האינטרנט, תוך מתן תכונות מתקדמות.