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

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

רן בר-זיק ינואר 3, 2009 9:16 pm אין תגובות

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

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

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

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

הפתרון הנפוץ ביותר בעולם (משתמשים בו באתר 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');

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

This text will be replaced

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


<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>

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

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

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

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

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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