המאמר הזה נכתב ונשלח על ידי מפתח חיצוני. צוות ממשק ה-API של YouTube מודה לבן ארוטוריה על הזמן ועל המומחיות שלו.
בן לונגוריה, אוניברסיטת וויסקונסין – מדיסון, טכנולוגיה אקדמית
פברואר 2009
מבוא
איור 1: הדגמת נגן TubeLoc Chromeless
וואו תוך כחודש, ממשק ה-API של YouTube Player יהיה בן שנה בערך. כמה שנים נכתבות באינטרנט? בוצעו מספר פרויקטים נהדרים המבוססים על ממשק ה-API. צריך רק לעקוב אחר הבלוג של YouTube Developer API כדי לראות שיש הרבה אנשים שעשו איתו דברים טובים.
קבוצת האפליקציות הנוכחית של נגן ה-API ב-YouTube נכתבת ב-ActionScript 2, ולמרות זאת היא שפה מצוינת לשימוש, אנשים רבים משתמשים ב-ActionScript 3 ו/או ב-Flex. הבעיה היא שצריך לדלג בין כמה חישוקים כדי שאפליקציות ActionScript 2 יוכלו לתקשר עם אפליקציות ActionScript 3. "אבל רגע...נראה לי שכבר שמעתי את זה--האם אין כבר משהו?".
מספר גדול של אנשים כבר למדו איך לעשות את זה, והם התעניינו בפורומים למפתחים של API של YouTube. יש גם פרויקטים של AS3 Chromeless Wrapper ו-Flex Implementer כדי שיהיה קל יותר למפתחים להשתמש בהם.
רציתי דרך קלה ופשוטה לשימוש חוזר בפונקציונליות של Player API רק ב-ActionScript 3 או ב-MXML. שיעור ללא גמישים עבור הפרויקטים האלה לטיפול באלרגיות גמישות, ורכיב קל לשימוש של פרויקטים גמישים לגמישים. TubeLoc עמדה בשתי הדרישות
TubeLoc (שילוב של YouTube ו-LocalConnection) היא ספריית ActionScript 3 המשמשת כמתאם ל-API של YouTube ActionScript 2 Player. ניתן להוסיף בקלות פונקציונליות של סרטוני YouTube לאפליקציות של ActionScript 3 או Flex באמצעות נגני Chrome מלאים או נגני YouTube ללא Chrome. TubeLoc משתמשת במחלקה LocalConnection בתקשורת עם SWF של ActionScript 2. קובץ ה-SWF של ActionScript 2 מתקשר עם נגן ה-API הרשמי של YouTube. אז איך אנחנו משתמשים בעניין הזה?
אדמת האדמה
תחילה, יש להוריד את הגרסה הנוכחית של הספרייה מפרויקט Google Code. לאחר פתיחת האריזה של ארכיון ה-ZIP, תופיע ספרייה של as3 בתוך התיקייה. כאן נמצאת הספרייה src, הכוללת כמה כיתות לדוגמה. אפשר להתחיל להשתמש בהן כנקודת התחלה. בקטע com/enefekt/tubeloc בספרייה src יש שני קבצים. Movie.as הוא מה שאפשר להשתמש בו בפרויקטים של Flex, וב-MovieSprite.as אפשר להשתמש בפרויקטים של ActionScript 3. בcom/enefekt/tubeloc/event יש סוגים שונים של מופעים של ההתראות שאפשר לשלוח מהנגן.
לפני שננסה את הדוגמאות במדריך הזה, עליך לוודא שהספרייה src בספרייה as3 נמצאת בנתיב הכיתה. התהליך הזה משתנה בהתאם לפיתוח ולפיתוח שלו, לכן מומלץ לבדוק את מסמכי התיעוד של סביבת הפיתוח שלכם.
לאחר הידור ההדגמה או היישום שלך, תזדקק ל-ActionScript 2 SWF שתומך בממשק API של YouTube Player. ניתן למצוא את קובץ ה-SWF הזה בארכיון הגרסאות כאן: as3/lib/as2_tubeloc.swf. עליך רק לוודא שלצד קובץ ה-HTML המטמיע את אפליקציית ה-SWF שלך, כך:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
הערה: ניתן לשנות את הנתיב לקובץ SWF באמצעות המאפיין playerWrapperUrl בספרייה.
שימוש ב-Movie.as
בואו נראה כיצד להשתמש בגרסת Flex של TubeLoc. תחילה נבחן את הנגן המלא של Chrome (עם כל הפקדים), ולאחר מכן את הנגן BYOC ללא Chrome. כך משתמשים בנגן Chrome במלואו ב-MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
זה כואב, נכון? כלל לא! בואו נעלם ונגיע לסגנון ללא כרום:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
אנחנו מוסיפים עוד כאב עם מאפיין נוסף, וזהו. אז כך ייראה קובץ ה-MXML כולו:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:tubeloc="com.enefekt.tubeloc.*"> <!-- TubeLoc Movie Component --> <tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" /> </mx:Application>
הערה: ברכיב mx:Application, אנחנו מוסיפים את מרחב השמות tubeloc עם החבילה של רכיב הסרט. לאחר מכן, נוכל להשתמש ברכיב כפי שמודגם. בהמשך נבדוק מה זמין להגדרה ונהתקשר לרכיב הזה.
שימוש ב-MovieSprite.as
כעת נראה כיצד להשתמש בגרסת ActionScript 3 של TubeLoc. לגרסה זו אין צורך בכיתות מהמסגרת של Flex, והיא משתמשת רק בכיתות מקוריות של Flash Player. קודם נלמד איך לבצע את נגן Chrome המלא, ולאחר מכן את הנגן ללא Chrome. לדוגמה:
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromed extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromed() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite("7tTNOX8jfno");
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480 + MovieSprite.CHROME_HEIGHT;
}
}
}
תחילה, אנחנו מייבאים את הכיתות הנחוצות מ-TubeLoc. לאחר מכן, בבנייה אנחנו יוצרים מופע של הכיתה MovieSprite, ומעבירים את מזהה הווידאו שלנו לבנאי של MoviesSprite. בשלב הבא, אנחנו מוסיפים האזנה לאירוע עבור PlayerReadyEvent. בגורם המטפל של האירוע onPlayerReady, אנחנו מגדירים את גודל הסרט. הערה: אנחנו משתמשים בנגן Chrome המלא, ולכן אנחנו נהנים מהיתרון של נכס סטטי CHROME_HEIGHT ברמה MovieSprite. כך אנחנו יכולים להתאים את גודל הסרט למשקל של Chrome.
אוקיי, אז מה לגבי נגן chrome?
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromeless extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromeless() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite(null, true);
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480;
youtubeMovie.loadVideoById("7tTNOX8jfno");
}
}
}
אז מה שונה? בבנייה, אנחנו מעבירים את הפרמטר null עבור מזהה הווידאו, והפרמטר השני של true אומר לכיתה MovieSprite שאנחנו מתכוונים לעבור את Chrome. תבחינו גם בהבדל של הגורם המטפל באירועים onPlayerReady. כאן אנחנו טוענים את הסרטון שלנו לפי מזהה, באמצעות השיטה loadVideoById.
איך אפשר להתקשר, מה אוכל לקבל?
אם כך, במה נוכל לפנות אליך ובאילו אירועים עלינו לעבוד? בארכיון הגרסאות שהורדת יש תיעוד מלא של הקוד כדי לקבל את הפרטים. סקירה מהירה, גם ב-Movie.as וגם ב-MovieSprite.as יש לכם את השיטות הבאות:
seekTo(seconds:Number, allowSeekAhead:Boolean=true):void setVolume(volume:Number):void getVolume():Number unMute():void mute():void clearVideo():void setSize(width:Number, height:Number):void loadVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] cueVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] stopVideo():void playVideo():void pauseVideo():void destroy():void
בנוסף לשיטות האלה, ברכיב Movies.as יש לכם גישה לנכסים הבאים:
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
אתם יכולים להירשם לאירועים האלה. אפשר למצוא פרטים נוספים בתיעוד.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
סיכום
אני מקווה שמאמר זה עזר לך לשלב את הפונקציונליות והתוכן של YouTube ביישומי Flash שלך. יש מגבלה שכדאי לזכור במהלך הפיתוח של TubeLoc: לא יכולים להיות על שני נגני YouTube באותו במה.
אני מקווה שהבעיה תיפתר בזמן. לכן, אם תיתקלו בבאגים או בפיצ'ר שחסר לכם, היכנסו אל פרויקט Google Code ודווחו עליו בכלי למעקב אחר בעיות. תודה על שקראת מידע זה!
ביוגרפיה של המחבר
בן לונגוריה הוא מפתח אפליקציות אקדמיות מאוניברסיטת ויסקונסין-מדיסון. הוא מפתח עם Flash מאז השקת Flash 5, ו-Flex מאז השקת ה-Flex 2. בשנתיים האחרונות הוא פיתח גם אפליקציות המופעלות ב-Mozilla. בן עבד על מספר פרויקטים חינוכיים ואקדמאים, כולל יישומים בפלטפורמות שונות המתמקדים בדפדפן ובשולחן העבודה. הוא ממלא תפקיד פעיל בעיצוב ממשק ואינטראקציה, ונהנה מהאתגר של יצירת תוכנה נוחה לשימוש. ניתן למצוא את הבלוג שלו בכתובת http://enefekt.com/sansbrowser/ , ולקרוא את תרומותיו ל-InsideRIA.
העבודה הזו היא ברישיון Creative Commons Attribution 3.0 United States.