البرمجة

Silverlight أنشئ مشغلك الفيديو على الويب (1)

تقريباً من المميزات الرائعة في Silverlight سهولة إنشاء تطبيقات رائعة مثل مشغل فيديو في وقت قصير جداً جداً وبسهوله عالية بإستخدام أدوات جاهزة

والأفضل أيضاً أن لديك الحرية والمرونة في التطوير عليها من دون قيود !

سوف اتطرق في هذه المقالة عن إنشاء مشغل فيديو خاص بك بإمكانك تصميمه بالشكل الذي يعجبك ليناسب تصميم موقعك مثلاً

أو لوضع إعلاناتك الخاصة في مشغل الفيديو مثلاً في جميع مقاطع الفيديو ويتم تغييرها من ملف xml واحد مثلاً

يعني هناك خيارات ومميزات كثيرة في هذا التطبيق وسندخل في صلب الموضوع مباشرة

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

كما تفضلنا سابقاً سنعمل على برنامج Blend حالياً بشكل أساسي

إذاً نفتح برنامج Blend

نعمل New Project ونختار طبعاً Silverlight Website

الأن سنبدأ بتصميم الإطار الخارجي للمشغل

نجعل مساحة إطار العمل العرض 480 والإرتفاع 400 ونجعل لون الخلفية رمادي غامق كالتالي

طبعاً لمعرفة هذه التفاصيل يمكنك الرجوع إلى المقالة السابقة لأن فيها تعليمات أساسية للادوات :)

ثم نرسم مربع داخل إطار العمل لونه رمادي فاتح وحدوده لونه أسود بعرض 2 بيكسل كالتالي

الأن نبدأ الجد :)

نضغط على هذا الزر ( وهو عبارة عن مكتبة يحتوي على الأدوات الغير مستخدمه بشكل مستمر مثل الأدوات المطروحة في واجهة البرنامج )

ثم نضغظ على Show All ليضهر لنا جميع الأدوات ونختار MediaElement

الأن نرسم بالضغط على اللفارة شكل مربع طبعاً بإداة MediaElement وهو يمثل مساحة المربع لعرض الفيديو فيه ليصبح كالتالي :)

الان في خصائص المشغل ستجد في نافذة Media الخاصية Source وفيها تعطي مصدر الفيديو ليتم تشغيله وفي حالتنا هذي سأختار مقطع فيديو ممتع عن دعاية لسيارة أودي :)

ستلاحظ انه بعد إختيار المقطع من أي مكان مختلف عن مجلد مشروعك سيقوم بنسخه إلى المشروع وأخذ قيمة امتداده من المشروع مباشره وهذي حركه جداً رائعة من Blend

الأن ستجد الصورة الأولى من الفيديو قد ضهرت لك في مربع مساحة عرض الفيديو

لكنه لم يتمدد الفيديو على مقاس مربع عرض الفيديو, بإمكانك جعله هكذا لتكون الدقه والعرض بشكل سليم لكن أيضاً بإمكانك جعله متمدد وهذا في أغلب الأوقات يظهر بصوره جميله وسليمة

ولجعل عرض الفيديو متمدد في مساحة عرض الفيديو , إذهب إلى نافذة media واضغط على السهم الذي تحته لتظهر الخصائص الغير مستخدمه بشكل مستمر والمخفيه

ليظهر لك الخاصية Stretch , إختر في هذه الخاصية Fill

ليظهر الفيديو بعرض المساحة الكاملة كالتالي

الأن بإمكانك الضغط على F5 لمشاهدة عملك وسيعمل على تشغيل الفيديو في الصفحة

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

إضافة الأزرار لتشغيل وإيقاف المشغل و تكبير المشغل للشاشة كاملة وعمل تكبير وتخفيض للصوت

وشكراً

بإمكانك مشاهدة فيديو درس لنفس عمل هذا الدرس الشرح يطرحه باللغة الإنجليزية لكنه سهل لأنه فقط تتبع خطوات ولأي إستفسارات أخرى انا حاظر

هنا بإمكانك الحصول على المصدر مع المثال ستجد الملف المضغوط يحتوي على الملفات التالية

لمشاهدة المثال افتح Defualt.htm

للتحميل اضغط هنا


 

‫10 تعليقات

  1. أخوي عبد المالك
    أشكرك جدا على طرحك المميز جدا..
    صراحة أنا كنت متابع لأخبار هذي التقنية الحديثة من مايكروسوفت من وقت ما صدرت
    بس ألحين بمقالاتك و دروسك عنها زاد إهتمامي فيها

    الله يبارك فيك على هالمجهود الجبار…

  2. ماشاء الله يا عيوني والله ^_^ دائماً تتحفنا بالجديد والحين باذن الله احمل البرامج كلها واطبق الدرس يا عيوني حبه بحبه راح اتقنها معك باذن الله

  3. أخوي أحمد الموسى

    أشكرك جداً على مرورك المميز :)

    والله يبارك فيك كذالك , تمنياتي لك القلبية بالتوفيق إن شاء الله تعالى

    وبإذن الله القادم أفضل وتقبل أطيب تحياتي لك

    عبدالكريم

    الله يسلمك والله انت اللي اتحفتني بمرورك , بإذن الله تحملها وتستفيد منها تحياتي لك ياحلو

  4. السلام عليكم
    جزاكم الله خيراً ولكن وين باقي الدرس
    إضافة الأزرار لتشغيل وإيقاف المشغل و تكبير المشغل للشاشة كاملة وعمل تكبير وتخفيض للصوت وما إلى ذلك

    فى أنتظار الدرس الجديد :)

  5. جزاكم الله فى خيراً وفى الإنتظار ولكن يا اخي ممكن سؤال بسيط ايش نوع الملفات اللى يدعمها هذا الملف اقصد الامتدادات المدعمه ويمكن تشغيلها ؟ وهل تنصح ميكرو سوفت بأمتداد معين حتى يعمل بشكل اسرعه على الإنترنت
    مشكور

  6. مرحبا أخوي علمني

    والله ما أعرف من هالناحية لكن جرب بنفسك وشوف حاول تضيف إمتدادت مختلفه , وأصغر ملف فيديو يناسب الإنترنت هو flv لكنه خاص للفلاش ولا ادري اذا كان يشتغل في السيلفرلايت ولا لا

    بيني وبينك انا من فتره ما كملت على السيلفر لايت اتمنى اني اكمل عليه لكن الحين ما راح اقدر :) منها ما عندي وقت ومنها قوة عمل الفلاش فما أدري اي واحد أتعلم منهم كل واحد عنده مميزات تغريني والمشكله صعب اني اتعلم كلهم في نفس الوقت لضيق الوقت

    فالفلاش لديه مرونه عالية في لغة البرمجة والبساطه في فهم الكلاسات بشكل سلس عن طريق لغة البرمجة ActionScript 3 والسيلفرلايت لا يعتمد الا على الجافا سكريبت لكنه يتميز بإتصاله بالسيرفر واستخدامه بلغة البرمجة فيجوال بيسك والسي شارب لان هذا عملي هو البرمجة بهاللغتين

    مع ذالك محتار لأني لازم أختار ^_^

    تحياتي لك يالغالي

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى