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

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

אתרים שונים זקוקים לוידאו למטרות שונות ומשונות. הרבה מאד מתכנתים מתייחסים לוידאו באתר האינטרנט כסוג של וודו. אולי הם צודקים, אבל שום מתכנת לא צריך להרתע מניגון וידאו באתר כאשר יש אפשרות ליצור בקלות נגן 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 של סקין פשוט.

פוסטים נוספים שכדאי לקרוא

למפתחי ובוני אתרי אינטרנט

מדריך לשאילתות יעילות ל Chat GPT

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

פיתוח ב-JavaScript

Axios interceptors

תכנון נכון של קריאות AJAX באפליקציה ריאקטית וניהול השגיאות או ההצלחות עם פיצ׳ר נחמד של axios

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

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

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