HTMLالوسم <video>

تعريفه

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

هناك خصائص عديدة يمكن إضافتها لهذين الوسمين و لكن الخصائص التالية هي الأهم و التي لا بد من إضافتها:

• بالنسبة للوسم <video> نضيف الخاصية controls لإظهار أزرار تحكم في نافذة الفيديو.
• بالنسبة للوسم <source> نضيف الخاصية src لتحديد مسار الفيديو الذي سيتم تشغيله، و الخاصية type لتحديد نوع الفيديو الذي سيتم تشغيله.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <video>.

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.

الخاصية autoplay

يمكن إضافتها للوسم لتحديد ما إن كان سيتم تشغيل الفيديو بشكل تلقائي أم لا.
في حال تم تمرير القيمة true لها فهذا يعني أنه سيتم تشيغل الملف بشكل تلقائي, و في حال تم تمرير القيمة false لها فهذا يعني أنه لن يتم ذلك.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية controls

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

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية crossorigin

نضيفها للوسم في حال أردنا عرض فيديو موجودة في موقع آخر و هذا الفيديو سيتم عرضه لاحقاً بداخل <canvas>.
سبب ذلك أن الوسم <canvas> لا يسمح برسم فيديو بداخله ما لم يكن بالأساس موجود في نفس الموقع.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

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

الخاصية height

يمكن إضافتها للوسم لتحديد كم سيكون طول الفيديو الذي يتم عرضه بالبكسل.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية loop

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

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية muted

يمكن إضافتها للوسم لجعل الفيديو مقطوع الصوت ( Muted ) بمعنى أنه حتى و لو كان شغال فلن يكون الصوت مسموع إلى أنه يتم رفعه بشكل يدوي.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية poster

يمكن إضافتها للوسم لوضع صورة تظهر مكان الفيديو قبل أن يتم تشغيله.
يجب تمرير رابط الصورة التي سيتم عرضها كقيمة لها.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية preload

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

• في حال تم تمرير القيمة none لها فهذا يعني أنه لا يجب أن يتم تحميل الفيديو بشكل تلقائي.
• في حال تم تمرير القيمة metadata لها فهذا يعني أنه سيتم تحميل المعلومات الوصفية للفيديو ( Metadata ) مثل مدته.
• في حال تم تمرير القيمة auto لها فهذا يعني أنه قد يتم تحميل الفيديو حتى و إن لم يقم المستخدم بتشغيله.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية src

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

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية width

يمكن إضافتها للوسم لتحديد كم سيكون عرض الفيديو الذي يتم عرضه بالبكسل.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

إستخدامه

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

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

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

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

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

<video width="360" height="200" poster="thumbnail.PNG" controls>
    <source src="iron-man-mark-2.mp4" type="video/mp4">
    <source src="iron-man-mark-2.ogg" type="video/ogg">
    Your browser does not support the video tag!
</video>

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له.

نصائح و ملاحظات

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

يفضل وضع الفيديو بأكثر من صيغة بواسطة الوسم <source> لضمان عمل الفيديو عند المستخدم مهما كان نوع و إصدار المتصفج الذي يستخدمه.