מדריך HTML5 – וידאו (התגית video)

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

כעת יש אלמנט וידאו ב-HTML 5 כאשר האלמנט הוא טבעי לדף. ניתן לשלוט עליו באמצעות CSS, ניתן להתממשק אליו באמצעות JavaScript וליצור קשרים בינו לבין אלמנטים אחרים והכל באופן טבעי וכיפי.

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

<video controls="controls"  width="640" height="360">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    הדפדפן שלך לא תומך ב-HTML 5. אנו מצטערים.
</video>

מה יש לנו פה?

ראשית תגית וידאו פשוטה שבה אני מציין את הגובה, את הרוחב וכן את העובדה שאני רוצה בקר שליטה (לחצן play וסמן התקדמות) באמצעות controls=controls. אחרי כן אני מציין את ה-source – שם אני כותב את ה-URL של הסרטון שלי וכן את סוג הקידוד. בין התגית הפותחת לתגית הסוגרת של ה-video אני כותב מסר המיועד לדפדפנים מיושנים שלא תומכים ב-HTML 5 video.

וכך זה יראה:

תכונות נוספות לוידאו

בנוסף ל-controls, ניתן להוסיף תכונות נוספות לוידאו. למשל: autoplay שגורם לסרט להתנגן מיד עם הטעינה, loop  שגורם לסרט לחזור לנקודת ההתחלה ולהמשיך להתנגן. ניתן גם להגדיר poster עם תמונה שתוצג בנגן לפני שמפעילים את הסרט.

הוספת גרסאות קידוד נוספות

למרות שאקספלורר 9, כרום וספארי תומכים בתקן MP4, פיירפוקס ודפדפנים נוספים אינם תומכים בו. גם התמיכה בתקן היא עניין נזיל ולפיכך כל עוד HTML 5 ועניין הקידוד שבו הוא תומך לא התקבעו, מומלץ לספק קידודים נוספים לדפדפנים אחרים. קל מאד לעושת זאת – הנה דוגמא:

<video controls="controls"  width="640" height="360">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    הדפדפן שלך לא תומך ב-HTML 5. אנו מצטערים.
</video>

הוספת תמיכה בדפדפנים ישנים

ניתן להוסיף תמיכה בוידאו לדפדפני אינטרנט אקספלורר מגרסה 8 ומטה או דפדפנים אחרים שאינם תומכים ב-HTML 5 באמצעות אספקת חלופה מבוססת פלאש במקום הטקסט 'הדפדפן שלך לא תומך ב-HTML 5'. איך עושים את זה? פשוט מכניסים את קוד הפלאש בין תגיות ה-video:

<video controls="controls" width="640" height="360">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" 
    width="640" height="360">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashVars" value="config={'playlist':
        ['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',
        {'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />
        <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" 
        width="640" height="360" title="No video playback capabilities, please download the video below" />
    </object>
</video>

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