این مقاله توسط یک توسعه دهنده خارجی نوشته و ارسال شده است. تیم YouTube API از بن لونگوریا برای وقت و تخصصش تشکر می کند.
بن لونگوریا، دانشگاه ویسکانسین - مدیسون، فناوری دانشگاهی
فوریه 2009
- معرفی
- لای سرزمین
- استفاده از Movie.as
- با استفاده از MovieSprite.as
- چه چیزی می توانم تماس بگیرم، چه چیزی دریافت کنم؟
- نتیجه
معرفی
شکل 1: نسخه نمایشی پخش کننده بدون کروم TubeLoc
وای. تنها یک ماه دیگر، از زمان نوشتن این مقاله، API YouTube Player یک ساله خواهد شد. این چند سال اینترنت است؟ تعدادی پروژه بزرگ بر اساس API ساخته شده است. فقط باید وبلاگ YouTube Developer API را دنبال کنید تا ببینید افراد زیادی هستند که کارهای بزرگی با آن انجام داده اند.
مجموعه فعلی برنامه‌های پخش‌کننده YouTube API با ActionScript 2 نوشته شده‌اند، و در حالی که این زبان هنوز یک زبان عالی برای استفاده است، بسیاری از مردم اکنون از ActionScript 3 و/یا Flex استفاده می‌کنند. مسئله این است که شما باید از چند حلقه عبور کنید تا برنامه های ActionScript 2 را برای برقراری ارتباط با برنامه های ActionScript 3 دریافت کنید. "اما صبر کنید... فکر می کنم قبلاً این را شنیده بودم - آیا قبلاً چیزی برای این وجود ندارد؟" ممکن است بپرسید
تعداد زیادی از مردم قبلاً متوجه شده اند که چگونه این کار را انجام دهند و با مهربانی خرد خود را در تالارهای گفتگوی برنامه نویس YouTube API رها کرده اند. همچنین پروژه‌های AS3 Chromeless Wrapper و Flex Embedded Player وجود دارد تا استفاده از آن برای توسعه‌دهندگان آسان‌تر شود.
من یک راه آسان و ساده برای استفاده مجدد از عملکرد API Player تنها در ActionScript 3 یا MXML می‌خواستم. یک کلاس بدون فلکس برای پروژه‌های حساس به فلکس، و یک جزء فلکس با استفاده آسان برای پروژه‌های دوستدار فلکس. TubeLoc هر دو نیاز را برآورده کرد
TubeLoc (ترکیبی از YouTube و LocalConnection) یک کتابخانه ActionScript 3 است که به عنوان آداپتور YouTube ActionScript 2 Player API عمل می کند. می‌توانید به راحتی قابلیت‌های ویدیوی YouTube را به برنامه‌های ActionScript 3 یا Flex خود با پخش‌کننده‌های یوتیوب فول کروم یا بدون کروم اضافه کنید. TubeLoc از کلاس LocalConnection در برقراری ارتباط با واسطه ActionScript 2 SWF استفاده می کند. ActionScript 2 SWF با پخش کننده رسمی YouTube API ارتباط برقرار می کند. پس چگونه از این چیز استفاده کنیم؟
لای سرزمین
ابتدا باید نسخه فعلی کتابخانه را از پروژه Google Code دانلود کنید. پس از باز کردن بایگانی فشرده انتشار، یک دایرکتوری as3 در داخل آن پیدا خواهید کرد. زیر این دایرکتوری src است که شامل چند کلاس نمونه است. با خیال راحت از آنها به عنوان نقطه شروع استفاده کنید. در زیر com/enefekt/tubeloc در دایرکتوری src دو فایل وجود دارد. Movie.as چیزی است که می توانید در پروژه های Flex خود استفاده کنید و MovieSprite.as چیزی است که می توانید در پروژه های ActionScript 3 خود استفاده کنید. در com/enefekt/tubeloc/event کلاس‌های رویداد مختلفی برای اعلان‌های مختلف وجود دارد که می‌توان از بازیکن ارسال کرد.
قبل از امتحان کردن مثال های این آموزش، مطمئن شوید که دایرکتوری src در پوشه as3 در مسیر کلاس شما قرار دارد. فرآیند انجام این کار بسته به آنچه که برای توسعه استفاده می کنید متفاوت است، بنابراین مستندات محیط توسعه خود را بررسی کنید.
هنگامی که نسخه ی نمایشی یا برنامه خود را کامپایل کردید، به ActionScript 2 SWF نیاز دارید که با 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 را بررسی کنیم. ابتدا پخش کننده فول کروم (با تمام کنترل ها) و سپس پخش کننده بدون کروم BYOC را بررسی خواهیم کرد. نحوه استفاده از پخش کننده فول کروم در 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 را به همراه بسته مولفه Movie اضافه می کنیم. پس از انجام این کار، می توانیم از کامپوننت همانطور که نشان داده شد استفاده کنیم. بعداً به آنچه برای تنظیم و فراخوانی این مؤلفه در دسترس است نگاه خواهیم کرد.
با استفاده از MovieSprite.as
حال بیایید نحوه استفاده از نسخه ActionScript 3 TubeLoc را بررسی کنیم. این نسخه به هیچ کلاسی از فریمورک 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 لازم را وارد می کنیم. سپس در سازنده یک نمونه از کلاس MovieSprite ایجاد می کنیم و شناسه ویدیوی خود را به سازنده MovieSprite می دهیم. در مرحله بعد، یک شنونده رویداد برای PlayerReadyEvent اضافه می کنیم. در کنترل کننده رویداد onPlayerReady ، اندازه فیلم را تنظیم می کنیم. توجه: از آنجایی که ما از پخش کننده فول کروم استفاده می کنیم، از یک ویژگی ثابت 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");
}
}
}
پس چه فرقی دارد؟ در سازنده، null برای شناسه ویدیو ارسال می‌کنیم و دومین پارامتر true به کلاس MovieSprite می‌گوید که بدون کروم می‌رویم. همچنین متوجه تفاوت در کنترل کننده رویداد 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 را در برنامه های فلش خود ادغام کنید. در حین توسعه با TubeLoc یک محدودیت وجود دارد که باید به خاطر داشته باشید: نمی توانید همزمان دو پخش کننده YouTube را روی صحنه داشته باشید.
انشالله در زمان مناسب این مشکل برطرف شود. بنابراین، لطفاً، هنگامی که اشکالات یا برخی از ویژگی‌ها را کمبود پیدا کردید، از پروژه کد Google بازدید کنید و آن را در ردیاب مشکل گزارش دهید. با تشکر برای خواندن!
بیوگرافی نویسنده
بن لونگوریا یک برنامه‌نویس برنامه‌های آکادمیک برای دانشگاه ویسکانسین-مدیسون است. او از زمان Flash 5 و Flex از زمان انتشار Flex 2 در حال توسعه با Flash بوده است. در 2 سال گذشته او همچنین برنامه های کاربردی مبتنی بر موزیلا را توسعه داده است. بن روی تعدادی از پروژه های آموزشی و دانشگاهی از جمله برنامه های کاربردی چند پلتفرمی که هم مرورگر و هم دسکتاپ را هدف قرار می دهند، کار کرده است. او نقش فعالی در طراحی رابط و تعامل دارد و از چالش ایجاد نرم افزار قابل استفاده لذت می برد. می توانید وبلاگ او را در http://enefekt.com/sansbrowser/ پیدا کنید و مشارکت های او را در InsideRIA بخوانید.
این اثر تحت مجوز Creative Commons Attribution 3.0 ایالات متحده مجوز دارد.