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

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