HTMLالوسم <video>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
- نصائح و ملاحظات
تعريفه
بشكل عام نستخدم الوسم <video>
لإعلام المتصفح أننا نريد عرض فيديو في الصفحة.
لتحديد الفيديو الذي نريد تشغيله فيه نستخدم الوسم <source>
.
هناك خصائص عديدة يمكن إضافتها لهذين الوسمين و لكن الخصائص التالية هي الأهم و التي لا بد من إضافتها:
- بالنسبة للوسم
<video>
نضيف الخاصيةcontrols
لإظهار أزرار تحكم في نافذة الفيديو. - بالنسبة للوسم
<source>
نضيف الخاصيةsrc
لتحديد مسار الفيديو الذي سيتم تشغيله، و الخاصيةtype
لتحديد نوع الفيديو الذي سيتم تشغيله.
أنواع الفيديوهات التي يمكن تشغيلها في أغلب المتصفحات هي .mp4
و .webm
و .ogg
و نقصد بذلك أن المتصفحات مهيئة للتعامل مع هذه الأنواع بدون الحاجة لأي إضافات مع الإشارة إلى أنه في حال كان جهاز المستخدم ضعيف و الفيديو الموضوع في الصفحة دقته عالية جداً فهذا الأمر سيؤدي لعدم تمكن المتصفح من تشغيل الفيديو عنده. إذاً إلى جانب أنواع الفيديوهات التي يمكن تشغيلها فإن دقة الفيديوهات أمر يجب النظر إليه عند معرفة ما هي الفيديوهات التي يمكن أن تعمل عند المستخدم. بشكل عام الدقة 360p
تعمل عند جميع المستخدمين.
في العادة نقوم بوضع أكثر من وسم <source>
لوضع نفس الفيديو بأكثر من صيغة لجعل المتصفح يختار أي ملف قادر على تشغيله منهم.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <video>
.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
3 | 12 | 3.5 | 10.5 | 3.1 | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
خصائصه
نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.
الخاصية autoplay
يمكن إضافتها للوسم لتحديد ما إن كان سيتم تشغيل الفيديو بشكل تلقائي أم لا.
في حال تم تمرير القيمة true
لها فهذا يعني أنه سيتم تشيغل الملف بشكل تلقائي, و في حال تم تمرير القيمة false
لها فهذا يعني أنه لن يتم ذلك.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
3 | 12 | 3.5 | 10.5 | 3.1 | مدعوم | مدعوم | 4 | مدعوم | 10.0 | مدعوم |
الخاصية controls
يمكن إضافتها للوسم لتحديد ما إن كان سيتم إظهار تحكم بالفيديو كتشغيله, إيقافه و تسريعه إلخ.. أم لا.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
3 | 12 | 3.5 | 10.5 | 3.1 | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
الخاصية crossorigin
نضيفها للوسم في حال أردنا عرض فيديو موجودة في موقع آخر و هذا الفيديو سيتم عرضه لاحقاً بداخل <canvas>
.
سبب ذلك أن الوسم <canvas>
لا يسمح برسم فيديو بداخله ما لم يكن بالأساس موجود في نفس الموقع.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
؟ | ≤18 | 12 | ؟ | ؟ | ؟ | ؟ | 14 | ؟ | ؟ | ؟ |
يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية crossorigin
لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب الذي يقضي بجلب الفيديو.
القيمة | معناها |
---|---|
anonymous |
في حال وضع هذا القيمة فهذا يعني أن الفيديو الذي يتم جلبها لا يمكن استخدامه بداخل <canvas> في حال كان من موقع آخر و هذه القيمة الإفتراضية لها في حال لم تحدد ذلك بنفسك أو في حال مررت لها قيمة خاطئة. |
use-credentials |
في حال وضع هذه القيمة فهذا يعني أنه يمكن استخدام الفيديو بداخل <canvas> حتى لو كان من موقع آخر لطالما أن الموقع الآخر في الأساس لا يعارض ذلك. |
الخاصية height
يمكن إضافتها للوسم لتحديد كم سيكون طول الفيديو الذي يتم عرضه بالبكسل.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
3 | 12 | 3.5 | 10.5 | 3.1 | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
الخاصية loop
يمكن إضافتها للوسم لتحديد ما إن كان الفيديو سيعاد تشغيله بشكل تلقائي كلما وصل إلى النهاية أم لا.
في حال تم تمرير القيمة true
لها فهذا يعني أنه سيتم إعادة تشغيله بشكل تلقائي حين يصل للنهاية، و في حال تم تمرير القيمة false
لها فهذا يعني أنه لن يتم ذلك.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
3 | 12 | 11 | 10.5 | 3.1 | مدعوم | مدعوم | 14 | مدعوم | 6 | مدعوم |
الخاصية muted
يمكن إضافتها للوسم لجعل الفيديو مقطوع الصوت ( Muted ) بمعنى أنه حتى و لو كان شغال فلن يكون الصوت مسموع إلى أنه يتم رفعه بشكل يدوي.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
30 | 12 | 11 | مدعوم | 5 | مدعوم | مدعوم | 14 | مدعوم | ؟ | مدعوم |
الخاصية poster
يمكن إضافتها للوسم لوضع صورة تظهر مكان الفيديو قبل أن يتم تشغيله.
يجب تمرير رابط الصورة التي سيتم عرضها كقيمة لها.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
3 | 12 | 3.6 | 10.5 | 3.1 | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
الخاصية preload
يمكن إضافتها للوسم لتحديد ما إن كان يجب أن يقوم المتصفح بتحميل الفيديو بشكل تلقائي بمجرد أن تفتح الصفحة حتى و إن لم يرد المستخدم تشغيله أم لا.
- في حال تم تمرير القيمة
none
لها فهذا يعني أنه لا يجب أن يتم تحميل الفيديو بشكل تلقائي. - في حال تم تمرير القيمة
metadata
لها فهذا يعني أنه سيتم تحميل المعلومات الوصفية للفيديو ( Metadata ) مثل مدته. - في حال تم تمرير القيمة
auto
لها فهذا يعني أنه قد يتم تحميل الفيديو حتى و إن لم يقم المستخدم بتشغيله.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
3 | 12 | 4 | مدعوم | 3.1 | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
الخاصية src
يمكن إضافتها للوسم لتحديد مسار الفيديو المراد تشغيله و لكن يفضّل تحديد مسار الفيديو بواسطة الوسم <source>
و ليس بداخل الوسم <video>
لأنه بإمكانك وضع أكثر من وسم <source>
لضمان أن يعمل الفيديو عند المستخدم مهما كان نوع المتصفح الذي يستخدمه.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
3 | 12 | 3.5 | 10.5 | 3.1 | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
الخاصية width
يمكن إضافتها للوسم لتحديد كم سيكون عرض الفيديو الذي يتم عرضه بالبكسل.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
إستخدامه
في المثال التالي قمنا بإضافة فيديو في الصفحة مع تحديد حجمه و إظهار أزرار التحكم به.
سبب إضافة وسمين <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>
لضمان عمل الفيديو عند المستخدم مهما كان نوع و إصدار المتصفج الذي يستخدمه.