TubeLoc: ספריית AS3 של YouTube Player

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

בן לונגוריה (Ben Longoria), אוניברסיטת ויסקונסין – מדיסון, טכנולוגיה אקדמית
פברואר 2009

• מבוא
• The Lay of the Land
• שימוש ב-Movie.as
• שימוש ב-MovieSprite.as
• אילו מספרים אפשר להתקשר אליהם, ומה מקבלים?
• סיכום

מבוא

איור 1: הדגמה של TubeLoc Player ללא Chrome

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

הקבוצה הנוכחית של אפליקציות הנגן של YouTube API נכתבה ב-ActionScript 2. זו עדיין שפה נהדרת לשימוש, אבל הרבה אנשים משתמשים עכשיו ב-ActionScript 3 ו/או ב-Flex. הבעיה היא שצריך לבצע כמה פעולות כדי לגרום לאפליקציות ActionScript 2 לתקשר עם אפליקציות ActionScript 3. יכול להיות שתגידו: "רגע, כבר שמעתי את זה בעבר – כבר יש משהו כזה?"

כבר הרבה אנשים הבינו איך לעשות את זה, והם שיתפו את הידע שלהם בפורומים למפתחים של YouTube API. בנוסף, יש את הפרויקטים AS3 Chromeless Wrapper ו-Flex Embedded Player, שמיועדים להקל על המפתחים להשתמש ב-Flex.

רציתי למצוא דרך פשוטה וקלה לשימוש חוזר בפונקציונליות של Player API רק ב-ActionScript 3 או ב-MXML. סוג רכיב ללא Flex לפרויקטים עם אלרגיה ל-Flex, ורכיב Flex קל לשימוש לפרויקטים שאוהבים את Flex. TubeLoc עמד בשתי הדרישות

TubeLoc (שילוב של YouTube ו-LocalConnection) היא ספריית ActionScript 3 שמשמשת כמתאם ל-YouTube ActionScript 2 Player API. אתם יכולים להוסיף בקלות פונקציונליות של סרטוני YouTube לאפליקציות ActionScript 3 או Flex באמצעות נגני YouTube עם מסגרת מלאה או ללא מסגרת. ב-TubeLoc נעשה שימוש בכיתה LocalConnection לתקשורת עם קובץ SWF של מתווך ActionScript 2. קובץ ה-SWF של ActionScript 2 מתקשר עם הנגן הרשמי של YouTube API. אז איך משתמשים בזה?

המצב בשטח

קודם צריך להוריד את הגרסה הנוכחית של הספרייה מפרויקט Google Code. אחרי ביטול הדחיסה של קובץ הארכיון של הגרסה, תמצאו בתוכו את הספרייה as3. מתחת לספרייה הזו נמצאת הספרייה src, שכוללת כמה מחלקות לדוגמה. אתם יכולים להשתמש בהן כנקודת התחלה. בספרייה src בקטע com/enefekt/tubeloc יש שני קבצים. אפשר להשתמש ב-Movie.as בפרויקטים של Flex, וב-MovieSprite.as בפרויקטים של ActionScript 3. ב-com/enefekt/tubeloc/event יש סיווגים שונים של אירועים עבור ההתראות השונות שאפשר לשלוח מהנגן.

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

אחרי שמאגדרים את הדמו או האפליקציה, צריך את קובץ ה-SWF של ActionScript 2 שמתקשר עם YouTube Player API. קובץ ה-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 מלאים (עם כל הלחצנים), ואז לנגן ללא רכיבי Chrome (BYOC). כך משתמשים בנגן עם מסגרת מלאה ב-MXML:

<tubeloc:Movie id="tubelocMovie" width="320" height="240" 
		videoId="GJ1sZBTnbuE" />

אני יודע, זה כואב, נכון? בכלל לא. אז בואו נהיה קצת משוגעים ונשתמש ב-chromeless:

<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

עכשיו נראה איך משתמשים בגרסה של TubeLoc ל-ActionScript 3. בגרסה הזו לא נדרשים שיעורים מסגרת Flex, והיא משתמשת רק בשיעורים מקומיים של Flash Player. קודם נראה איך עושים את זה עם נגן עם מסגרת מלאה, ואז עם נגן ללא מסגרת. דוגמה מלאה:

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

בסדר, מה לגבי הפעלה ללא לחצנים?

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");
		}
	}
}

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

בנוסף לשיטות האלה, ברכיב Movie.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 ולדווח על כך במערכת למעקב אחר בעיות. תודה על שקראת מידע זה!

ביוגרפיה של המחבר

בן לונגוריאה (Ben Longoria) הוא מפתח אפליקציות אקדמיות באוניברסיטת ויסקונסין-מדיסון. הוא פיתח ב-Flash מאז Flash 5 וב-Flex מאז השקת Flex 2. בשנתיים האחרונות הוא גם פיתח אפליקציות שמבוססות על Mozilla. בן עבד על מספר פרויקטים חינוכיים ואקדמיים, כולל אפליקציות לפלטפורמות שונות שמטרגטות גם את הדפדפן וגם את המחשב. הוא פעיל בעיצוב ממשק ואינטראקציה, ונהנה מהאתגר של יצירת תוכנה שימושית. הבלוג שלו זמין בכתובת http://enefekt.com/sansbrowser/, וניתן לקרוא את התוכן שהוא כתב ב-InsideRIA.

העבודה הזו בשימוש במסגרת רישיון Creative Commons Attribution 3.0 United States.