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

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

في هذا الدرس سنتعرف على الوسم المخصص لإضافة فيديوهات في الصفحة بالإضافة إلى الخصائص التي يمكن إعطاءها لها.

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

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

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

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

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

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

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

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

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

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

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

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