الوسم <video> في HTML يُستخدم لتضمين مقاطع الفيديو في صفحات الويب. يوفر هذا الوسم مجموعة من الخصائص التي تتحكم في كيفية عرض الفيديو وتشغيله. إليك شرح مفصل لأهم هذه الخصائص:

الخصائص الأساسية:

  • src: يُحدد مسار ملف الفيديو. هذه الخاصية ضرورية لتحديد مكان وجود الفيديو الذي سيتم عرضه. مثال: <video src="video.mp4"></video>.
  • controls: إضافة هذه الخاصية تُظهر أزرار التحكم في الفيديو، مثل زر التشغيل والإيقاف، شريط التقدم، التحكم في مستوى الصوت، ووضع ملء الشاشة. مثال: <video src="video.mp4" controls></video>.
  • width و height: يُحددان عرض وارتفاع مشغل الفيديو بالبكسل. من المهم تحديد هذه القيم لضمان عرض الفيديو بشكل صحيح. مثال: <video src="video.mp4" width="640" height="360"></video>.

خصائص التشغيل:

  • autoplay: تُشغّل الفيديو تلقائيًا بمجرد تحميل الصفحة. يجب استخدام هذه الخاصية بحذر، حيث أنها قد تكون مزعجة للمستخدمين. مثال: <video src="video.mp4" autoplay></video>.
  • loop: يُعيد تشغيل الفيديو بشكل مستمر بعد انتهائه. مثال: <video src="video.mp4" loop></video>.
  • muted: يكتم صوت الفيديو. مثال: <video src="video.mp4" muted></video>.
  • preload: يُحدد كيفية تحميل الفيديو. يأخذ إحدى القيم التالية:
    • none: لا يتم تحميل الفيديو إلا عند تشغيله.
    • metadata: يتم تحميل بيانات الفيديو الوصفية فقط (مثل المدة).
    • auto: يُحمل الفيديو بشكل كامل أو جزئي تلقائيًا. مثال: <video src="video.mp4" preload="auto"></video>.

خصائص إضافية:

  • poster: يُحدد صورة تُعرض قبل تشغيل الفيديو. تُستخدم هذه الخاصية لعرض صورة جذابة تجذب انتباه المستخدم. مثال: <video src="video.mp4" poster="poster.jpg"></video>.

استخدام العنصر <source>:

يُستخدم العنصر <source> داخل الوسم <video> لتحديد مصادر فيديو متعددة بصيغ مختلفة. هذا يُفيد في دعم مختلف المتصفحات التي قد لا تدعم جميع صيغ الفيديو. مثال:

HTML
<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  متصفحك لا يدعم تشغيل الفيديو.
</video>

في هذا المثال، سيحاول المتصفح تشغيل ملف video.mp4. إذا لم يدعم المتصفح هذه الصيغة، سيحاول تشغيل ملف video.webm. إذا لم يتمكن المتصفح من تشغيل أي من الصيغتين، سيتم عرض الرسالة "متصفحك لا يدعم تشغيل الفيديو".

ملاحظات مهمة:

  • يُفضل استخدام صيغ الفيديو الشائعة مثل MP4 و WebM لضمان توافق الفيديو مع معظم المتصفحات.
  • يجب توفير بدائل نصية أو مرئية للأشخاص الذين لا يستطيعون مشاهدة الفيديو.
  • استخدام خاصية autoplay باعتدال لتجنب إزعاج المستخدمين.

باستخدام هذه الخصائص بشكل صحيح، يمكنك تضمين مقاطع فيديو جذابة وفعالة في صفحات الويب الخاصة بك.