HTML / الفيديوهات

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

في المثال التالي، قمنا بإضافة فيديو في الصفحة:

📋

<video width="360" height="200" controls>
<source src="https://alnajm1.github.io/CodaFox/codafox.mp4" type="video/mp4">
<source src="https://alnajm1.github.io/CodaFox/codafox=.ogg" type="video/ogg">
Your browser does not support the video tag!</video>
        

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

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

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

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

📋

<video width="360" height="200" controls autoplay>
<source src="https://alnajm1.github.io/CodaFox/codafox.mp4" type="video/mp4">
<source src="https://alnajm1.github.io/CodaFox/codafox.ogg" type="video/ogg">
Your browser does not support the video tag!</video>