HTML الفيديوهات

وسوم و خصائص الفيديوهات

بشكل عام نستخدم الوسم <video> لإعلام المتصفح أننا نريد عرض فيديو في الصفحة.
لتحديد الفيديو الذي نريد عرضه فيه نستخدم الوسم <source>.

أنواع الفيديوهات التي يمكن عرضها

الأنواع الثلاثة .mp4 و .webm و .ogg تعمل على جميع المتصفحات و نقصد بذلك أن المتصفحات مهيئة للتعامل مع هذه الأنواع بدون الحاجة لأي إضافات مع الإشارة إلى أنه في حال كان جهاز المستخدم ضعيف و الفيديو الموضوع في الصفحة دقته عالية جداً فهذا الأمر سيؤدي لعدم تمكن المتصفح من تشغيل الفيديو عنده.

إذاً إلى جانب أنواع الفيديوهات التي يمكن تشغيلها فإن دقة الفيديوهات أمر يجب النظر إليه عند معرفة ما هي الفيديوهات التي يمكن أن تعمل عند المستخدم.
بشكل عام الدقة 360p تعمل عند جميع المستخدمين.

خصائص الفيديو

بالنسبة للوسم <video> هذه تعتبر أهم الخصائص الموجودة فيه:

• width لتحديد عرض نافذة الفيديو, الرقم الذي نمرره لها يمثل العرض بالبيكسل.
• height لتحديد طول نافذة الفيديو, الرقم الذي نمرره لها يمثل الطول بالبيكسل.
• control لإظهار أزرار تحكم في نافذة الفيديو.

بالنسبة للوسم <source> هذه تعتبر أهم الخصائص الموجودة فيه:

• src لتحديد مسار الفيديو الذي سيتم عرضه.
• type لتحديد نوع الفيديو الذي سيتم عرضه.

معلومة تقنية

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

لذلك قم دائماً بتحديد حجم الفيديو الذي تنوي عرضه في الصفحة سواء حددت ذلك بواسطة خصائص HTML أو كود CSS.

إضافة فيديو في الصفحة

في المثال التالي قمنا بإضافة فيديو في الصفحة مع إظهار أزرار التحكم بالفيديو و تحديد أن عرضه 360 بيكسل و طوله 200 بيكسل.

سبب إضافة وسمين <source> هو أننا قمنا بتجهيز نسختين من نفس الفيديو, الأولى نوعها .mp4 و الثانية نوعها .ogg بهدف جعل المتصفح يحاول تشغيل أول فيديو موضوع, و إن لم ينجح سيحاول تشغيل الفيديو الثاني.

النص Your browser does not support the video tag! يتم عرضه في الصفحة في حال كان متصفح المستخدم لا يدعم تشغيل الفيديو من الأساس.

<video width="360" height="200" controls>
    <source src="https://harmash.com/html/src/iron-man-mark-2.mp4" type="video/mp4">
    <source src="https://harmash.com/html/src/iron-man-mark-2.ogg" type="video/ogg">
    Your browser does not support the video tag!
</video>
		

جرب الكود

تشغيل الفيديو بشكل تلقائي

في حال أردت تشغيل الفيديو بشكل تلقائي عند فتح الصفحة كما هو الحال في يوتيوب فيمكنك إضافة الخاصية autoplay للوسم <video> مع الإشارة إلى أن هذه الخاصية لا تعمل على بعض الهواتف.

في المثال التالي قمنا بإضافة فيديو في الصفحة مع جعله يشتغل بشكل تلقائي عند فتح الصفحة.

<video width="360" height="200" controls autoplay>
    <source src="https://harmash.com/html/src/iron-man-mark-2.mp4" type="video/mp4">
    <source src="https://harmash.com/html/src/iron-man-mark-2.ogg" type="video/ogg">
    Your browser does not support the video tag!
</video>
		

جرب الكود