أول تجربة لإضافة فيديو في HTML للمبتدئين

إذا كنت تتعلم HTML لأول مرة وتريد أن تضيف فيديو في موقعك، فهذه المقالة لك لا تقلق، الأمر أسهل بكثير مما تتخيل. كل ما تحتاجه هو كود بسيط وبعض المعلومات لفهمه.

 ما هو وسم الفيديو في HTML؟

في HTML يوجد وسم خاص لإضافة الفيديوهات إلى صفحات الويب، وهو:

<video></video>

هذا الوسم يخبر المتصفح: "هنا يوجد فيديو"
لكن إذا تركته فارغًا فلن يظهر شيء، لذلك نضيف بداخله مصدر الفيديو الذي نريد عرضه.

 الكود الأساسي لإضافة فيديو

إليك مثال بسيط جدًا:

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

شرح الكود:

• <video controls> → هذا الوسم لعرض الفيديو، وميزة controls تعني أن المتصفح سيعرض أزرار التشغيل والإيقاف.

• <source src="video.mp4" type="video/mp4"> → هذا السطر يحدد مكان ملف الفيديو ونوعه.

• "متصفحك لا يدعم تشغيل الفيديو." → هذا النص يظهر إذا كان المتصفح قديم جدًا ولا يدعم الفيديو.

 أهم الخصائص (Attributes) التي تحتاجها

يمكنك تخصيص الفيديو كما تريد بإضافة بعض الخصائص:

الخاصية	وظيفتها
controls	لعرض أزرار التشغيل والإيقاف.
autoplay	يبدأ الفيديو تلقائيًا عند فتح الصفحة.
loop	يعيد تشغيل الفيديو تلقائيًا بعد انتهائه.
muted	يجعل الفيديو صامتًا في البداية.
width / height	للتحكم بحجم الفيديو على الصفحة.

مثال على فيديو يبدأ تلقائيًا ويعيد نفسه بلا صوت:

<video autoplay loop muted width="400">
  <source src="video.mp4" type="video/mp4">
</video>

 أين تضع الفيديو؟

• يمكنك وضع الفيديو في نفس مجلد ملفات موقعك.
• إذا كان موجودًا على الإنترنت (مثل YouTube)، يفضل استخدام رابط التضمين Embed من يوتيوب بدل رفع الملف بنفسك حتى لا يثقل موقعك.

مثال تضمين فيديو من يوتيوب:

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/VIDEO_ID" 
frameborder="0" allowfullscreen>
</iframe>

 نصائح للمبتدئين

1. استخدم ملفات MP4 لأنها مدعومة على جميع المتصفحات تقريبًا.
2. اضبط حجم الفيديو ليبدو مناسبًا على جميع الشاشات (يمكنك استخدام CSS لاحقًا لجعله متجاوبًا).
3. لا تستخدم فيديوهات كبيرة جدًا حتى لا تصبح صفحتك بطيئة.
4. إذا أردت تجربة الكود سريعًا، يمكنك استخدام أي محرر مثل CodePen أو محرر VS Code على جهازك.

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