ادراج فيديوهات اليوتوب في فلاش

[azizsoft]

http://img39.imageshack.us/img39/1332/virusx.gif


ادراج فيديو يوتوب في مشروع فلاشي يتطلب بعض المراحل التي سنتطرق اليها كما يلي :


افتح مشروع جديد حدد الطبقة الآولى ثم اضغط F9

1/ يجب تعديل بعض اعدادات الامان لمشروع العمل للسماح بالاتصال بسرفر يوتوب وهي خطوة اجبارية وسيكون أول كود الاتي

Security.allowDomain("www.youtube.com");
لايمكن تشغيل فيديو اليوتوب مباشرة بالملف الفلاشي بل يجب الاعلان عن مشغل فلاشي باكواد خاصة لقراءة ملف الفيديو المحمل من يوتوب
لذلك سنضيف هذا السطر ليصبح الكود


Security.allowDomain("www.youtube.com");

var my_player:Object;
الان عرفنا كائن مشغل من نوع Object وخزناه في ممتغير my_player سنضيف كلاس Loader لتحميل مشغل اليوتوب بكل خصائصه
وهو من فئة swf على الرابط المذكور أسفله وسيكون الكود كما يلي :

Security.allowDomain("www.youtube.com");

var my_player:Object;

var my_loader:Loader = new Loader();
my_loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
لضمان استكمال تحميل مشغل اليوتوب بكامل خصائصه والتأكد من ذلك سنضيف حدث استماع لعملية التحميل تكون عن طريق الأمر الأخير ليصبح الكود

Security.allowDomain("www.youtube.com");

var my_player:Object;

var my_loader:Loader = new Loader();
my_loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
my_loader.contentLoaderInfo.addEventListener(Event .INIT, onLoaderInit);
بعد ذلك سنضيف مباشرة هذا المشغل بعد ان حملناه وخزناه في المتغير my_player على المسرح
مع تحديد طول وعرض المشغل ليصبح الكود


Security.allowDomain("www.youtube.com");

var my_player:Object;

var my_loader:Loader = new Loader();
my_loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
my_loader.contentLoaderInfo.addEventListener(Event .INIT, onLoaderInit);

function onLoaderInit(e:Event):void{
addChild(my_loader);
my_player = my_loader.content;
my_player.addEventListener("onReady", onPlayerReady);
}

function onPlayerReady(e:Event):void{
my_player.setSize(640,360);
}
لو تشغل المشروع ستلاحظ ان المشغل اضيف الى المسرح من جهة اليسار لكنه بدون ملف فيديو
تحميل الفيديو يكون عن طريق الدالة loadVideoById() = وتعني تحميل الفيديو بواسطة معرفه باعتبار ان كل فيديو له معرف


sampleYouTubePlayer.loadVideoById(myVideoID, startingPoint);
myVideoID = هو معرف فيديو اليوتوب ==== عادة المعرف هو بعد علامة = في اي رابط فيديو بعد حرف v .
myVideoID = نقطة بداية تشغيل الفيديو .

بعد أن عرفنا طريقة استدعاء مشغل فيديو يوتوب لملف الفلاش سنقوم بتشغيل فيديو يوتوب مثلا وهذا هو رابطه

https://www.youtube.com/watch?v=XrFAb_kggQQ

وهذا هو معرف الفيديو XrFAb_kggQQ

وسيكون الكود النهائي ولاتنسى تغيير مقاسات المشروع الافتراضية الى مثلا 630 طول و 400 عرض


Security.allowDomain("www.youtube.com");

var my_player:Object;

var my_loader:Loader = new Loader();
my_loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
my_loader.contentLoaderInfo.addEventListener(Event .INIT, onLoaderInit);

function onLoaderInit(e:Event):void{
addChild(my_loader);
my_player = my_loader.content;
my_player.addEventListener("onReady", onPlayerReady);
}

function onPlayerReady(e:Event):void{
my_player.setSize(640,360);
my_player.loadVideoById(" XrFAb_kggQQ",0);
}

هناك بعض الوظائف التي يمكن استعمالها وهي تتعلق بمشغل اليوتوب المحمل مثلا:

loadVideoById() تشغيل الفيدو اليا بعد تحميله في فلاش .
cueVideoById() هاته الوظيفة تمنع الفيديو من التشغيل تلقائيا ويجب استعمال الوظيفة playVideo()
playVideo() لتشغيل الفيديو
pauseVideo() لايقاف الفيديو ايقاف مؤقت
stopVideo() ايقاف نهائي للفيديو
mute() كتم الصوت.
unMute() تشغيل الصوت لاحظ الان سنضيف زرين الى المشروع اضف طبقة واجعلها اسفل طبقة الاكشن اضف زر تشغيل باسم play_btn وزر ايقاف باسم pause_btn
وفي الكود اعلاه سنغير دالة التشغيل التلقائي loadVideoById() لتصبح في الكود اسفله cueVideoById()
بعد اضافة الزين بالاسماء المذكورة وذلك كما يلي :


Security.allowDomain("www.youtube.com");

var my_player:Object;

var my_loader:Loader = new Loader();
my_loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
my_loader.contentLoaderInfo.addEventListener(Event .INIT, onLoaderInit);

function onLoaderInit(e:Event):void{
addChild(my_loader);
my_player = my_loader.content;
my_player.addEventListener("onReady", onPlayerReady);
}

function onPlayerReady(e:Event):void{
my_player.setSize(640,360);
my_player.cueVideoById("XrFAb_kggQQ",0);
}

play_btn.addEventListener(MouseEvent.CLICK, playVid);
function playVid(e:MouseEvent):void {
my_player.playVideo();
}
pause_btn.addEventListener(MouseEvent.CLICK, pauseVid);
function pauseVid(e:MouseEvent):void {
my_player.pauseVideo();
}




معاينة ملف الدرس (http://im86.gulfup.com/ueXk4N.swf)


أرجو أن أكون قد حققت الفائدة


http://up.graaam.com/img/c254fbbb25128f204e18c9c273464a02.png

[abohmam]

جزاك الله خيرا أخى عزيز

ماشاء الله شرحت فأجدت وأفدت :abc_022:

بارك الله فيك وفى جهودك المميزة

[أبو يوسف]

جزاك الله خيرا اخانا عزيز وبارك الله فيك

شرح رائع سهل

.

[azizsoft]

بسم الله الرحمن الرحيم

أسعدني مروركم الكريم اخوتي الأفاضل :abc_022:

[علي قد حالي]

السلام عليكم ورحمة الله وبركاته
للأسف الملف لا يعمل .. أرجو فضلا لا أمرا تزويدي به ..
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . :abc_138:

[المصمم]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[علي قد حالي]

بسم الله الرحمن الرحيم

أسعدني مروركم الكريم اخوتي الأفاضل :abc_022:

السلام عليكم ورحمة الله وبركاته
للأسف الملف لا يعمل .. أرجو فضلا لا أمرا تزويدي به ..
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية :abc_025:

[كوكب الخليج]

جزاك الله خيرا

[خادم المسلمين]

:abc_028::abc_028: