‫הוספת כתוביות לתגית וידאו‬

‫אורן רוט‬ — Tue, 15 Dec 2009 14:48:31 +0000

הוספת כתוביות לסרטון וידאו זה בהחלט לא דבר חדש. בטכניקת הארדסאב (hard-sub) ניתן לצרוב את הכתוביות על גבי הסרטון ולעלות אותו לאינטרנט ובטכניקת סופטפאב (soft-sub) ניתן להציג סרטון עם כתוביות באמצעות שילוב של טכנולוגיית פלאש. מה שאני אלמד אתכם היום היא טכניקת סופטסאב להוספת כתוביות לסרטון המתנגן בתגית וידאו.

במדריך היום אנו נשתמש בסרטון וידאו בפורמט OGG או OGV (פורמט OGV הוא למעשה מקרה פרטי של OGG מכיוון ו-OGG יכול להתייחס גם לסאונד) ובכתוביות בפורמט SRT.

היתרונות של הטכניקה שנלמד היום היא שהיא משתמשת בפורמטים פתוחים (OGG ו-SRT), היישום שלה מאוד פשוט ודינאמי ובתוך קובץ הכתוביות אנחנו יכולים לשלב תגיות HTML שיופיעו מאוחר יותר כחלק מן הכתוביות.

<דוגמא><קוד>

קוד ה-HTML

בואו תחילה נביט בקוד ה-HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script>
<script type="text/javascript" src="video_subtitles.js"></script>

<style type="text/css">
#subtitle {
background-color: rgba(255, 255, 255, 0.7);
padding:10px 0;
position: absolute;
bottom: 0;
width: 100%;
color: black;
visibility: hidden;
font-size: 1em;
text-align:center;
direction:rtl;
}

#video {
width:432px;
height:240px;
direction:ltr;
}
</style>

</head>

<body>

id="video" src="video5.ogv" controls="" subtitles="en.srt"></video>
<div id="subtitle" style="visibility: hidden;"></div>

</body>
</html>

וכעת ההסבר. בשורה 4 אנחנו למעשה מוסיפים כהרגלנו בקודש את ספריית ה-jQuery מתוך google. בשורה הבא אנחנו נוסיף את הסקריפט שיגרום לכל הכתוביות להופיע (מקורהסקריפט הוא מהבלוג mozbox).

לאחר מכן בין שורות 7-26 אנחנו מגדירים עיצוב CSS לוידאו ולשורת הכתוביות, אני לא ארחיב על נושא העיצוב.

ועכשיו הגענו לעיקר, שורות 32-33 בואו נביט בהם שוב:

1 2	id="video" src="video5.ogv" controls="" subtitles="en.srt"></video> <div id="subtitle" style="visibility: hidden;"></div>

הוספנו למעשה שני דברים:

תגית וידאו - התגית מכילה id בשם video, קישור לקובץ הוידאו (בפורמט OGV), לחצני פעולה (המאפיין controls לא צריך לקבל שום ערך) וקישור לקובץ הכתוביות שלנו (בפורמט SRT).

אלמנט div ריק - האלמנט מכיל id בשם subtitles והוא מוסתר.

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

שימו לב! הסרטון נתמך אך ורק בדפדפנים מודרנים שתומכים בתגית video (תקן HTML 5). קרי Firefox 3.1/3.5 או chorme.

עוד באותו נושא:

‫Screenr – דרך מאוד נוחה להקליט צילומי מסך‬

‫אורן רוט‬ — Fri, 11 Sep 2009 19:58:54 +0000

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

האתר screenr.com מציע שירות חינמי לגמריי להקלטת צילומי מסך, אבל למה לדבר שאפשר לשמוע ולראות:

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

‫Htm - אחלה טיפים לבניית אתרים » וידאו‬

‫הוספת כתוביות לתגית וידאו‬

קוד ה-HTML

עוד באותו נושא:

‫Screenr – דרך מאוד נוחה להקליט צילומי מסך‬

עוד באותו נושא: