تمت كتابة هذه المقالة وإرسالها بواسطة مطوّر برامج خارجي. إنّ فريق عمل YouTube API شاكر بن لونغوريا على وقته وخبرته.
بن لانغوريا، جامعة ويسكونسن - ماديسون، التكنولوجيا الأكاديمية
شباط (فبراير) 2009
- المقدمة
- قصة الأرض
- استخدام Movie.as
- استخدام MovieSprite.as
- ما الذي يمكنني الاتصال به وما الذي يمكنني الحصول عليه؟
- الخاتمة
المقدمة
الشكل 1: عرض توضيحي بلا مشغّل بلا إنترنت على متصفّح Chrome بلا إنترنت
يا إلهي! في غضون شهر تقريبًا، وابتداءً من تاريخ كتابة هذه الرسالة، ستكون واجهة برمجة تطبيقات مشغّل YouTube عامًا واحدًا. كم عدد سنوات استخدام الإنترنت؟ وقد تم إنشاء عدد من المشروعات الرائعة باستخدام واجهة برمجة التطبيقات. ما عليك سوى اتباع مدونة واجهة برمجة تطبيقات مطوّر برامج YouTube للتحقق من وجود عدد كبير من الأشخاص الذين استفادوا من ذلك.
المجموعة الحالية من تطبيقات مشغل واجهة برمجة تطبيقات YouTube مكتوبة في ActionScript 2، وبينما لا تزال هذه اللغة لغة رائعة لاستخدامها، يستخدم الكثير من الأشخاص الآن ActionScript 3 و/أو Flex. تكمن المشكلة في أنه يتعين عليك التنقل خلال بعض الأطواق للحصول على تطبيقات ActionScript 2 للاتصال بتطبيقات ActionScript 3. "لكن انتظر...أعتقد أنني قد سمعت من قبل. أليس هناك شيء من هذا القبيل؟"
لقد توصل عدد كبير من الأشخاص إلى كيفية تنفيذ ذلك وتم نقل حكمتهم إلى منتديات مطوّري YouTube API. تم أيضًا تنفيذ مشروعَي التفاف AS3 بدون Chrome ومشغّل Flex المضمّن لتسهيل استخدام مطوّري البرامج.
أردت طريقة سهلة وبسيطة لإعادة استخدام وظائف واجهة برمجة تطبيقات Player في ActionScript 3 أو MXML فقط. فئة Flex خالية للمرن لمشاريع المرونة المرنة هذه، ومكوّن Flex سهل الاستخدام لتلك المشروعات التي تحب استخدام Flex. استوفى موقع TubeLoc الشرطين
TubeLoc (مزيج من YouTube وLocalConnection) هي مكتبة ActionScript 3 التي تعمل بمثابة محوّل لواجهة برمجة تطبيقات YouTube ActionScript 2 Player. يمكنك إضافة وظيفة فيديو YouTube بسهولة إلى تطبيقات ActionScript 3 أو Flex سواء باستخدام مشغلات Chrome الكاملة أو تلك التي لا تتضمن chrome. يستخدم TubeLoc فئة LocalConnection في التواصل مع ملف SWF لوسيط ActionScript 2. يتواصل ملف ActionScript 2 SWF مع مشغل YouTube API الرسمي. إذن، كيف نستخدم هذا الشيء؟
لاي أوف ذا لاند
أولاً، يجب تنزيل الإصدار الحالي من المكتبة من مشروع Google Code. بعد فك ضغط أرشيف الأرشيف المضغوط، ستجد دليل as3 بداخله. في ما يلي الدليل src الذي يتضمن بعض نماذج الفئات. لا تتردد في استخدام هذه كنقطة بداية. هناك ملفان ضمن com/enefekt/tubeloc في الدليل src. Movie.as هو ما يمكنك استخدامه في مشروعاتك المرنة، و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. سنلقي نظرة على مشغّل 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 وننقل معرّف الفيديو إلى دالة إنشاء MovieSprite. بعد ذلك، نضيف أداة معالجة الحدث لـ 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
بالإضافة إلى هذه الطرق، في مكوّن 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 والإبلاغ عنها في أداة تتبُّع المشاكل. شكرًا لك على القراءة!
السيرة الذاتية للمؤلف
بن لونغوريا هو مطوّر التطبيقات الأكاديمية لجامعة ويسكونسن ماديسون. وهو يتطور باستخدام Flash منذ Flash 5، وFlex منذ إصدار Flex 2. وعلى مدار العامين الماضيين، طوّر أيضًا تطبيقات تدعمها Mozilla. وقد عمل بن على عدد من المشروعات التعليمية والأكاديمية بما في ذلك التطبيقات عبر الأنظمة الأساسية التي تستهدف كلاً من المتصفح وسطح المكتب. وهو يؤدي دورًا نشطًا في تصميم الواجهة والتفاعل، ويستمتع بالتحدي المرتبط بإنشاء برامج قابلة للاستخدام. يمكنك العثور على مدونته على الموقع http://enefekt.com/sansbrowser/، وقراءة مساهماته على موقع InsideRIA.
تم منح هذا العمل بموجب ترخيص Creative Commons Attribution 3.0 في الولايات المتحدة.