Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

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>
<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>
<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>
<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> لضمان عمل الفيديو عند المستخدم مهما كان نوع و إصدار المتصفج الذي يستخدمه.

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة