الدرس 6: التعامل مع الفيديو بإستخدام HTML5

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

الطرق كثيرة سنقوم بشرح أبسطها واسهلها استخداماً . . . هيا بنا إلى الشرح

 

حالياً أكثر صيغ الفيديو انتشاراً هي “MP4” فلو قمت بتصوير أي مقطع باستخدام موبايل أو كاميرا رقمية حديثة سيكون المقطع الناتج بصيغة “MP4″، حتى برامج المونتاج أغلبها تصدر الأعمال بنفس الصيغة، إذاً سنرى كيفية إدراج مقطع بصيغة “MP4” في صفحة “HTML” الخاصة بنا.

 

نقوم بكتابة الكود التالي الخاص بإدراج فيديو في صفحة “HTML” :

<video width="320" height="240" autoplay controls>
   <source src="movie.mp4" type="video/mp4">
   Your browser does not support this video.
</video>

 

في السطر الأول قمنا بتحديد العرض والإرتفاع كما هو واضح إضافة إلى خياران الاول “autoplay” وهو لتشغيل الفيديو بشكل تلقائي في حال تحميل الصفحة والثاني “controls” لإظهار أو إخفاء أدوات التحكم بالفيديو مثل التوقيف والإستمرار والتحكم بالصوت.

في السطر الثاني قمنا بتحديد مكان وجود الفيديو سواء كان على السيفر الخاص بنا أو على سيرفر أخر ويمكن استخدام الرابط كامل أو رابط مختصر.

في السطر الثالث هنا نقوم بكتابة رسالة أو وضع أي صورة أو تنبيه يظهر للمستخدم في حال كان متصفحه لا يدعم تشغيل هذا النوع من الفيديو مع أنه إحتمال نادر جداً ولكن لا ضرر من كتابة رسالة مثلأ “عذراً متصفحك لا يدعم تشغيل هذا النوع من الفيديو !!” .

 

هنا مثال على الفيديو في حال إظهار أدوات التحكم.

 

سنقوم في درس متقدم  بشرح كيفية تخصيص أدوات التحكم بالفيديو وإظهارها بالشكر الي نرغب به.

ملاحظة هذا الفيديو قمت برفعه على السيرفر الخاص بـ “مطورين تيك”.

 

إذا واجهتكم أي مشاكل أو استفسار أخر يمكنكم ترك تعليق هنا أو على الفيسبوك.

 

شارك برأيك