🎬 إضافة الفيديو إلى موقعك: دليل الوسم <video> الشامل 📹

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

🔍 ما هو الوسم <video>؟

وسم <video> هو وسم HTML5 مصمم خصيصاً لإدراج وعرض ملفات الفيديو مباشرةً في صفحة الويب، دون الحاجة إلى استخدام إضافات خارجية مثل Flash. فهو يعمل في جميع المتصفحات الحديثة ويوفر للمطورين تحكماً كاملاً في عرض الفيديو وخصائصه.

<!-- أبسط صورة لاستخدام وسم الفيديو -->
<video src="my_video.mp4" controls>
</video>
  • <video>: الوسم الرئيسي الذي يخبر المتصفح أننا نريد عرض فيديو هنا.
  • src: السمة (Attribute) التي تحدد مسار ملف الفيديو (مثل my_video.mp4).
  • controls: سمة مهمة تضيف شريط التحكم التلقائي (زر التشغيل، الإيقاف، التحكم في الصوت، إلخ).

🛠️ خطوات إضافة فيديو أساسي

لنبدأ بمثال عملي بسيط. افترض أن لديك ملف فيديو اسمه sunset.mp4 في نفس مجلد ملف الـ HTML.

الخطوة 1: نبدأ بفتح وسم <video>. الخطوة 2: نحدد مصدر الفيديو باستخدام السمة src. الخطوة 3: نضيف السمة controls حتى يتمكن الزائر من التحكم بالفيديو. الخطوة 4: نغلق الوسم.

<video src="videos/sunset.mp4" controls width="600">
  عذراً، متصفحك لا يدعم تشغيل الفيديو.
</video>
  • width="600": سمة اختيارية لتحديد عرض عنصر الفيديو بالبكسل. يمكن استخدام height أيضاً.
  • النص بين الوسمين: هذا النص سيظهر فقط إذا كان المتصفح قديماً ولا يدعم وسوم HTML5 للفيديو. إنها ممارسة جيدة لإضافة رسالة بديلة.

⚙️ أهم السمات (Attributes) للتحكم في الفيديو

يمنحنا الوسم <video> العديد من السمات لجعل الفيديو يتصرف بالطريقة التي نريدها:

  1. controls: تضيف أزرار التحكم (تشغيل، إيقاف، صوت، إلخ).
  2. autoplay: تبدأ تشغيل الفيديو تلقائياً بمجرد تحميل الصفحة (يجب استخدامها بحذر، فمعظم المتصفحات الحديثة تمنع التشغيل التلقائي مع الصوت). 
    <video src="intro.mp4" autoplay muted> </video>
  3. muted: تجعل الفيديو صامتاً عند بدء التشغيل (غالباً ما تُستخدم مع autoplay).
  4. loop: تجعل الفيديو يعيد التشغيل تلقائياً من البداية عندما ينتهي. 
    <video src="background_loop.mp4" autoplay muted loop> </video>
  5. poster: تحدد صورة ثابتة (غلاف) تظهر قبل أن يبدأ المستخدم بتشغيل الفيديو. 
    <video src="movie_trailer.mp4" controls poster="trailer_thumbnail.jpg">
</video>

🌐 دعم جميع المتصفحات: استخدام الوسم <source>

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

الفكرة: نقدم للصفحة عدة مصادر (صيغ) للفيديو، وسيتحقق المتصفح من القائمة ويشغل أول صيغة يدعمها.

<video controls width="100%">
  <source src="video/my_video.mp4" type="video/mp4">
  <!-- MP4 مدعوم بشكل واسع -->
  
  <source src="video/my_video.webm" type="video/webm">
  <!-- WebM بديل ممتاز وأخف حجماً -->
  
  عذراً، متصفحك لا يدعم تشغيل الفيديو.
  يمكنك <a href="video/my_video.mp4">تحميل الفيديو</a> بدلاً من ذلك.
</video>
  • لاحظ أننا حذفنا السمة src من وسم <video> الرئيسي.
  • نضع كل مصدر داخل وسوم <source> منفصلة.
  • type: سمة مهمة في <source> تخبر المتصفح بنوع ملف الفيديو (مثل video/mp4) لتسريع عملية الاختيار.

✨ مثال شامل: فيديو خلفية متكرر

لنجمع ما تعلمناه في مثال واقعي: إنشاء فيديو خلفية صامت ومتكرر لقطعة في صفحة موقع، مع صورة غلاف.

<video controls autoplay muted loop poster="images/cover.jpg" width="800">
  <source src="media/hero-background.mp4" type="video/mp4">
  <source src="media/hero-background.webm" type="video/webm">
  <p>للأسف، متصفحك لا يدعم فيديو الخلفية. إليك <a href="media/hero-background.mp4">رابط لتحميله</a>.</p>
</video>
  • autoplay muted loop: سيبدأ التشغيل تلقائياً وهو صامت وسيعيد التشغيل عند الانتهاء – مثالي للخلفيات.
  • poster: صورة cover.jpg ستظهر حتى يتم تحميل الفيديو.
  • الرسالة البديلة: أصبحت أكثر فائدة حيث اقترحت رابط تحميل.

🧠 ملخص الدرس

تعلمت اليوم أساسيات قوية لإضافة الفيديو إلى صفحات HTML:

  • استخدام الوسم <video> مع السمة src للإضافة البسيطة.
  • أهمية سمة controls لمنح المستخدمين التحكم.
  • كيفية استخدام السمات autoplay, muted, loop, و poster لتخصيص سلوك الفيديو.
  • الطريقة الاحترافية لدعم جميع المتصفحات باستخدام عدة وسوم <source> داخل وسم <video> الرئيسي.