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

 

הוספת כתוביות לסרטון וידאו זה בהחלט לא דבר חדש. בטכניקת הארדסאב (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>

        <video 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
<video 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.
שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

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

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות
תמ"א 38No Gravatar 13 במרץ

ללא ספק הוספת תגיות לווידאו יכולה לשפר את איכות קידום האתר שלך.

[תגובה]

אורן רוט

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

[תגובה]

תמ"א 38

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

[תגובה]

אורן רוט

יכול להיות מאוד.

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון