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

יצירת נגן flv לאתרי אינטרנט עם פלאש

רן בר-זיק דצמבר 19, 2009 10:59 pm סגור לתגובות על יצירת נגן flv לאתרי אינטרנט עם פלאש

הסבר כיצד ליצור נגן וידאו פשוט שאפשר לשלוט עליו באמצעות פרמטרים של HTML

כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.

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

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

יצירת הנגן באמצעות component של פלאש.

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

פותחים את פלאש CS3 -> לוחצים על window ואז על Components (אפשר גם Ctrl+F7). מתגלית בפנינו הרשימה של הקומפוננטות שיש לנו – בוחרים את FLVPlayBack שנמצא תחת קטגורית הוידאו. לחיצה כפולה עליו תייבא אותו אל הספריה שלנו ונוכל להשתמש בו.

קונפיגורציה של הנגן

יש שתי דרכים לקנפג את הנגן על מנת שיראה לנו את הסרט שאנו רוצים והעיצוב שאנו רוצים. הדרך הראשונה היא באמצעות הממשק הגרפי של התוכנה. באמצעות ה-selection tool שהוא סימן העכבר בעצם, בוחרים את ה-FLVPlayBack שנמצא ב-stage. ובוחרים בלשונית Properties. שם ניתן לבחור את הסקין של הנגן, את המקור של הנגן ושלל תכונות נוספות.

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

ראשית אנו מייבאים את הקומפוננטה ואת ה-FlashVars


import fl.video.*;

try {
    var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
} catch (error:Error) {
    
}

אחרי כן עלינו לטעון את הפרמטרים שלנו – במקרה הזה flv שהוא ה-url של קובץ ה-flv של הנגן ו-skin שהוא ה-url של הskin שלנו.


import fl.video.*;

try {
    var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
} catch (error:Error) {
    
}

var myVideo:FLVPlayback = new FLVPlayback();
myVideo.source = String(paramObj['flv']);
myVideo.skin = String(paramObj['skin']);


addChild(myVideo);

זה הכל! זה כל ה-fla שלנו. נקמפל את ה-fla ל-swf לפי בחירתנו ונציב אותו ב-HTML באופן הבא:


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
        width="300"
        height="255"
        align="middle"
        id="main">
	    <param name="allowScriptAccess" value="sameDomain" />
	    <param name="movie" value="MYSWF.swf" />
	    <param name="quality" value="high" />
	    <param name="bgcolor" value="#ffffff" />
	    <param name="FlashVars" value="skin=http://www.example.com/skin.swf&flv=http://www.example.com/movie.flv" />
	    <embed src="MYSWF.swf"
	           width="300"
	           height="255"
	           autostart="false"
	           quality="high"
	           bgcolor="#ffffff"
	           FlashVars="skin=http://www.example.com/skin.swf&flv=http://www.example.com/movie.flv"
	           name="main"
	           align="middle"
	           allowScriptAccess="sameDomain"
	           type="application/x-shockwave-flash"
	           pluginspage="http://www.macromedia.com/go/getflashplayer" />
		</object>

שימו לב כיצד אני מעביר את הפרמטרים של ה-FlashVars. באופן פשוט ביותר כמו בקשת GET.

הקבצים הסופיים

הנה קישור ל-SWF של הנגן עצמו וכן SWF של סקין פשוט.

כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.
ActionScript 3 סקריפטים
ללמוד ג'אווהסקריפט בעברית

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

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