אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » נגישות אינטרנט » הוספת כתוביות לסרטוני וידאו באתר אינטרנט

הוספת כתוביות לסרטוני וידאו באתר אינטרנט

רן בר-זיק נובמבר 21, 2013 5:33 pm תגובה אחת

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

מתי לא צריך להוסיף כתוביות?

לא צריך להוסיף כתוביות אם סרטון הוידאו הוא חלופה לטקסט. מה זאת אומרת? אם למשל אני מסביר על תוכנה מסוימת במאמר כלשהו ואז שם סרטון וידאו שממש מראה את מה שכתבתי בפועל – אין צורך להציב כתוביות בסרטון. למשל: במאמר הזה אני מסביר על 'התקנה' של Jasmine SA בטקסט ואז מצרף סרטון להמחשה. כיוון שמה שיש בסרטון מתואר בפירוט רב בטקסט, אין צורך להוסיף כתוביות בסרטון בתנאי שאני מציין באופן מפורש שהסרטון הוא להמחשה ואינו מכיל מידע נוסף מעבר למה שכתוב.

כל השאר – נדרשים להוסיף כתוביות לסרטוני וידאו – גם כאלו שאנו עושים להם embedding ממקומות אחרים כגון Youtube. מדובר באחת הדרישות הקשות ביותר ליישום עבור אתרי תוכן.

במאמר הזה אני מסביר כיצד מוסיפים כתוביות לסרטוני וידאו הן ביוטיוב והן במקומות אחרים באמצעות HTML5 Video.

ראשית נשאלת השאלה איך יוצרים את הכתוביות? יש לא מעט תוכנות שמסייעות למסכן שנדרש ליצור כתוביות שבהן צריך להיות סנכרון בין התמונה והקול לכיתוב שיש על מסך. זו מלאכה לא פשוטה וסיזיפית למדי שהופכת ליותר קלה באמצעות תוכנות חינמיות כמו Subtitle studios או אפילו שירותים אונלייניים כמו subsedit. יש מלא תוכנות ושירותים כאלו ואני ממש ממש לא מתכוון להכנס להסבר איך ליצור את התרגום. בסופו של דבר אמור להיות לנו קובץ תרגום שהתוכנה מייצרת. יש מספר רב של פורמטים טקסטואלים עבור קבצי תרגום לוידאו. המובילים הם srt ו webVTT. מאוד מאוד קל להמיר בין פורמטים שונים של תרגום ויש לא מעט ממירים שונים ברשת. באופן עקרוני אני מעדיף לעבוד עם webVTT כי הוא זה שנתמך על ידי HTML5. איך הוא נראה? הנה דוגמה של תרגום אמיתי לסרטון שהצבתי ב-Youtube ומסביר איך לשנות שרת DNS:


WEBVTT

1
00:00:00.000 --> 00:00:06.652
שלום וברוכים הבאים למדריך איך לשנות שרת די.אנ.אס

2
00:00:07.586 --> 00:00:11.179
זה נשמע מאוד מסובך אבל בת'כלס זה ממש ממש פשוט

3
00:00:12.688 --> 00:00:14.954
בואו ונתחיל. פותחים את וינדוז 7 ומחפשים את לוח הבקרה

4
00:00:15.384 --> 00:00:17.772
קונטרול פאנל בגרסה שלי

5
00:00:18.327 --> 00:00:22.494
מחפשים את
Network and sharing center

6
00:00:21.494 --> 00:00:24.665
אין לי מושג איך זה בעברית
אבל פחות או יותר זו התמונה

7
00:00:23.665 --> 00:00:26.621
לוחצים

8
00:00:27.772 --> 00:00:32.448
מצד שמאל יש לנו
change adapter settings

9
00:00:33.491 --> 00:00:35.300
לוחצים וכאן מופיעות לנו כל הרשתות שיש לנו

10
00:00:35.312 --> 00:00:42.706
במקרה הזה זה לפטופ אז יש כמה רשתות. יש את הבלוטות' שאני לא משתמש בו אבל הוא קיים

11
00:00:41.706 --> 00:00:45.751
יש את ה
Local area network

12
00:00:44.751 --> 00:00:46.302
אם אני מחבר את הלפטופ שלי ישירות

13
00:00:46.318 --> 00:00:47.762
יש את ה
wireless

14
00:00:48.102 --> 00:00:50.680
שכרגע אני משתמש בו
כפתור ימני

15
00:00:51.048 --> 00:00:53.400
properties
או אפשרויות בעברית

16
00:00:55.681 --> 00:00:59.937
בוחרים ב
Internet protocol version 4

17
00:01:04.759 --> 00:01:09.030
properties
ואתם רואים כאן? יש

18
00:01:06.397 --> 00:01:10.498
Use the following DNS server addresses

19
00:01:11.636 --> 00:01:17.045
אנו נלחץ על 8, 8 , 8 ואתם יכולים לנחש?

20
00:01:19.185 --> 00:01:21.032
שמונה!

21
00:01:22.158 --> 00:01:25.590
נלחץ על או קיי

22
00:01:22.850 --> 00:01:25.538
נלחץ על 
close

23
00:01:25.679 --> 00:01:28.116
close
נסגור את החלון

24
00:01:29.976 --> 00:01:36.584
עכשיו אם אנחנו ננסה להכנס לאתר ככה מוגבל. נוכל לעשות את זה

25
00:01:35.584 --> 00:01:40.174
לפעמים יכול להיות שנצטרך לפתוח ולסגור את הדפדפן, לא תמיד

26
00:01:39.174 --> 00:01:42.363
זה הכל! פשוט, לא?

התרגום הזה הוכן על ידי שירות SubsEdit האונלייני. – פשוט תמללתי את מה שהלך שם, העתקתי את המלל, שמרתי בקידוד UTF8 והמרתי מ-srt ל-webVTT באמצעות אחד מהכלים האונליינים שיש ברשת. פשוט וקל. לאלו שיש להם לתרגם לא מעט סרטים – מומלץ להוריד את Subtitle studios.

עכשיו נשאלת השאלה איך להכניס את התרגום הזה לסרט?

עם Youtube זה ממש ממש קל. השירות תומך בהוספת קבצי webVTT אל הסרטונים שנמצאים בו ומבצע את ההטמעה באופן אוטומטי. פשוט ניגשים אל הסרטון בפאנל הניהול של Youtube (שזמין לכם אם העליתם את הסרטון) – ולחצים על עריכה ואז על הוספת כתוביות – מעלים את הקובץ ומציינים את השפה. זה הכל! אם ביצעתם הטמעה של השירות באתר שלכם – אתם מכוסים מבחינת נגישות.

ואם אני לא משתמש ב-Youtube אלא רוצה להטמיע את הכתוביות באמצעות הנגן שלי? מאוד מאוד פשוט – כלומר פשוט אם אתם משתמשים ב-HTML5! איך עושים את זה? משתמשים ב-captions שנתמך בכל הדפדפנים (כולל אינטרנט אקספלורר 10) אך לא בפיירפוקס. עבור אינטרנט אקספלורר 9 ופיירפוקס יש פתרונות אחרים שאדון בהם בהמשך, אבל מבחינת נגישות – עבודה עם tracks תספק את עניין הנגישות באופן מלא.

אז איך מטמיעים את הוידאו והתרגום באמצעות HTML5? פשוט ביותר:

שימו לב שאם אתם משתמשים בפיירפוקס או באקספלורר 9 – לא תראו את הכתוביות. אבל תקנות הנגישות מבקשות תרגום – לא תרגום על כל הדפדפנים ואלמנט ה-track עומד בקריטריון הנגישות.

יתרון גדול נוסף של הכתוביות הוא שגוגל מסוגל לאנדקס אותן בקלות.

כך נראה הקוד – פשוט, לא?


<video controls="controls" width="500">
<source src="/internet_files/movies/dns_guide.mp4" type="video/mp4"/>
<source src="/internet_files/movies/dns_guide.ogg" type="video/ogg"/>
<track kind="subtitles" label="Hebrew subtitles" src="/internet_files/movies/dns_guide_heb.vtt" srclang="he" default></track>
</video>

הוספת כתוביות לסרטוני וידאו יכול להיות תיק לא קטן – אבל התיק הזה הוא בעיקר תוכני ולא טכני. בין אם אתם משתמשים ב-Youtube הפופולרי ובין אם אתם מטמיעים לבד את הוידאו באמצעות HTML5 – מבחינה טכנית מדובר בהליך פשוט ביותר.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
וידאו באתר אינטרנט נגישות אינטרנט

תגובה אחת

  1. אבי הגב מאי 29, 2022 בשעה 6:05 pm

    האם תקנה זאת חלה גם כן על קבצי Audio?

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד