كتب هذه المقالة مطوّر خارجي وأرسلها. يشكر فريق YouTube API "بن لونجوريا" على وقته وخبرته.
بن لونجوريا، جامعة ويسكونسن - ماديسون، التكنولوجيا الأكاديمية
شباط (فبراير) 2009
- مقدمة
- The Lay of the Land
- استخدام Movie.as
- استخدام MovieSprite.as
- ما هي الأرقام التي يمكنني الاتصال بها وما هي الخدمات التي يمكنني الحصول عليها؟
- الخاتمة
مقدمة
الشكل 1: عرض توضيحي لمشغل TubeLoc بدون متصفّح Chrome
يا للروعة بعد شهر تقريبًا من كتابة هذه السطور، سيمر عام على إطلاق 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 لتسهيل استخدام هذه الميزة على المطوّرين.
أردت طريقة سهلة لإعادة استخدام وظائف 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 الرسمي. كيف يمكننا استخدام هذا الإجراء؟
The Lay of the Land
أولاً، عليك تنزيل الإصدار الحالي من المكتبة من مشروع Google Code. بعد فك ضغط أرشيف zip للإصدار، سيظهر لك دليل as3. ضمن هذا الدليل، يتوفّر دليل src الذي يتضمّن بعض نماذج الصفوف. يمكنك استخدام هذه الأفكار كنقطة بداية. ضمن com/enefekt/tubeloc في الدليل src، يتوفّر ملفان. و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 الكامل (الذي يتضمّن جميع عناصر التحكّم) أولاً، ثم على مشغّل BYOC بلا عناصر تحكّم. في ما يلي كيفية استخدام مشغّل 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. سنلقي نظرة على كيفية استخدام مشغّل العناصر الكاملة أولاً، ثم مشغّل العناصر غير الظاهرة. في ما يلي مثال كامل:
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. يساعدنا ذلك في تحديد حجم الفيلم مع مراعاة ارتفاع النافذة.
حسنًا، ماذا عن مشغّل "بلا عناصر تحكم"؟
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 في الولايات المتحدة.