<video>

وسم الفيديو <video>

وسم video يشغّل الفيديو في المتصفح مباشرة بلا إضافات — مع أزرار تحكم مدمجة عبر controls.

منذ HTML5 صار الفيديو مواطنًا أصليًّا في الويب. أبسط استخدام: src للملف وcontrols لأزرار التشغيل المدمجة. لتوافق أوسع ضع عدة مصادر بوسوم source داخلية (mp4 يكفي عمليًّا اليوم) ونصًّا بديلًا للمتصفحات العتيقة.

قاعدة التشغيل التلقائي الصارمة في كل المتصفحات: autoplay لا يعمل إلا مع muted — حماية للمستخدمين من الصوت المفاجئ.

الصياغة

<video src="clip.mp4" controls width="640"></video>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<video controls width="100%" poster="https://placehold.co/640x360/1a1725/7c5cff?text=Poster">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
  متصفحك لا يدعم الفيديو.
</video>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
controls	أزرار التشغيل المدمجة — بدونها لا واجهة إطلاقًا
poster	صورة الغلاف قبل التشغيل
autoplay + muted	تشغيل تلقائي — لا يعمل autoplay بدون كتم
loop / preload	تكرار التشغيل / سياسة التحميل المسبق

💡 نصائح عملية

خلفية فيديو ديكورية؟ الوصفة: autoplay muted loop playsinline بلا controls
poster تحسّن الانطباع الأول قبل تحميل أي إطار

⚠️ أخطاء شائعة

autoplay بلا muted — المتصفح يتجاهله بصمت وتحتار لماذا «لا يعمل»
نسيان controls ثم الاستغراب أن الفيديو «صورة جامدة»

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs