וידאו באתר? רק פלאש!

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

יש מצבים שבהם חייבים להציג וידאו באתר האינטרנט – כאשר יש לנו מוצר חדשני למשל שאנו רוצים להציג אותו, או כאשר יש לנו בלוג וידאו שבאמצעותו אנו רוצים להפיץ את התכנים שלנו לעולם. השאלה היא איך אנו מציגים את הוידאו באתר שלנו?

הפתרון הנפוץ ביותר בעולם (משתמשים בו באתר Youtube או ב-Metacafe למשל) להצגת תכני וידאו הוא באמצעות פלאש. בישראל הפתרון הזה אינו נפוץ באתרי התוכן הגדולים (ומאד מוזר שכך) אבל אין שום סיבה שלא להשתמש בו – הוא פשוט, זול מאד ובנוסף גם נגיש לכל דפדפני האינטרנט.

אני יוצא מנקודת הנחה שהסרטון שהכנתם הוא בפורמט avi או mpeg – שהם הפורמטים הנפוצים ביותר לצילום ביתי. כל מה שאנו צריכים לעשות זה להמיר את הסרט לפורמט מיוחד בשם flv. flv – Flash Video הוא פורמט שבו כל סרטי הוידאו-פלאש נשמרים. מדובר בפורמט קנייני של אדובי אך הוא מאד נפוץ בכל העולם. לאחר שנמיר את הסרט ל-flv, עלינו להעלות אותו לאתר האינטרנט ושם נוכל להציג אותו בדף האינטרנט שנרצה באמצעות נגן מיוחד (וחינמי) שלא צריך ידע רב על מנת להפעיל אותו.

המרת סרטון הוידאו לפורמט flv

תחילה אנו צריכים להמיר את סרטון הוידאו שלנו לפורמט FLV (Flash Video) הפורמט הזה הוא פורמט קנייני של חברת אדובי, אי אפשר לבצע את ההמרה באמצעות כלים אלמנטריים להמרת וידאו כמו כלים שאנו מכירים להמרה אך ישנם כמה כלים חינמיים ולא רעים בכלל כמו האתר http://www.zamzar.com/ להמרה אונליין חינמית או תוכנת Riva שמטפלת בהמרה. אלו שיש להם גישה לתוכנת Flash של אדובי יכולים ליצור את הסרטון משם, אך אני מצאתי את תוכנת Riva נוחה מאד להמרת סרטים.

צפייה בסרטון ה-flv

על מנת לוודאי שההמרה מפורמט הוידאו לשנו לפורמט הפלאש וידאו עבדה חלק, אנו צריכים להסתכל על התוצאה. יש לא מעט תוכנות שאנו יכולים לראות באמצעותן סרטוני flv. המובילה שבהן היא התוכנה החינמית בקוד פתוח VLC שבכלל אפשר לראות איתה לא מעט פורמטים והיא יותר טובה ונוחה מה-Windows Media Player.

התקנה של נגן באתר

קובץ flv הוא עדיין לא קובץ פלאש בסיומת swf שכל אתר אינטרנט יכול לראות. מה שאנו צריכים לעשות זה לבנות נגן בשפת התכנות של אדובי Action Script. הנגן יוכל לקחת קישור למקור ה-flv (לקובץ ה-flv שנמצא בספריה כלשהי באתר), לקודד אותו ולהראות את התוצאה בפורמט swf שכל דפדפן אינטרנט נורמלי מסוגל להראות.
בעצם מדובר בתוכנה קטנה, לא שונה באופן מהותי מתוכנת JavaScript קטנה שאפשר להתקין בדף כלשהו באתר האינטרנט בלי צורך להבין JavaScript. כך גם נגן ה-flv. אפשר להתקין אותו בלי לדעת Action Script כלל וכלל.

בחירת הנגן והנגן המומלץ

ישנם מספר רב של נגנים בשוק, אני באופן אישי ממליץ על JW FLV Media Player כיוון שהוא נכתב בקוד פתוח והוא בחינם. ישנם עוד כמה נגנים (חלקם יותר טובים) אך הם עולים כסף. פלאשיסט טוב יחזיק נגן משל עצמו ויגבה עליו מחיר כמובן. JW FLV Media Player יכול להיות מיושם על ידי בונה אתרים ללא שום צורך בידע כלשהו בשפת תכנות.

ראשית אנו נוריד את ה-JW FLV Media Player מהאתר. נפתח את הקובץ המכווץ ונראה שם מספר קבצים. הראשון הוא קובץ שנקרא player.swf וקובץ שנקרא swfobject.js. את שניהם יש להציב בספריה כלשהי באתר שלנו כי הם חיוניים להמשך.
שנית, ניצור div בדף ה-HTML שצריך להכיל את הסרטון. ל-div חייב להיות id מסוים משלו.
עכשיו, לשלב ה-copy&paste. הדביקו את הקוד הבא באיזשהו מקום:

<script type='text/javascript' src='swfobject.js'></script>

<div id="YOURDIVID"></div>

<script type='text/javascript'>
  var so = new SWFObject('player.swf','ply','470','320','9','#000000');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','MYVIDEO.flv');
  so.write('YOURDIVID');
</script>

כאשר כמובן יש להחליף בין MYVIDEO.flv לקובץ ה-flv שלכם ובין YOURDIVID ל-id האמיתי של ה-DIV שלכם. ולדאוג שהנתיב ל-player.swf ול-swfobject.js יהיה לקובץ הנכון באתר שלכם. יש עוד לא מעט פרמטרים לתוכנה הזו ואפשר במאמץ מועט מאד לשנות אותה באמצעות הקוד הזה, כך למשל הוספת השורה הזו תגרום למחיקת ה-Control Bar:

so.addParam('flashvars','&file=MYCONTENT&controlbar=none');

והנה הדוגמא המיוחלת:

ואת זה עשיתי עם הדבקה של הקוד הבא:

<script type='text/javascript' src='/internet_files/flash/flashplayer/swfobject.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
  var so = new SWFObject('/internet_files/flash/flashplayer/player.swf','ply','470','320','9','#000000');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','/internet_files/flash/flashplayer/video.flv');
  so.write('mediaspace');
</script>

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

היתרונות של פורמט הפלאש

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

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