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

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