شرح الوسائط المتعددة بالعربي — إضافة فيديو وصوت لـ HTML5

تخيّل أنك تشاهد يوتيوب في متصفحك. ما الذي يجعل ذلك ممكناً؟ في الماضي كانت المتصفحات تحتاج إلى برامج إضافية (مثل Flash) لتشغيل أي فيديو أو صوت. لكن منذ HTML5، أصبح دعم الوسائط مدمجاً مباشرة في المتصفح! وكل ما تحتاجه هو وسمان بسيطان: <video> و <audio>.

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

يُستخدم وسم <video> لتضمين مقطع فيديو مباشرة داخل الصفحة. بدون أي أدوات إضافية ولا Flash ولا JavaScript — فقط HTML.

<video width="640" height="360" controls>
    <source src="intro-video.mp4" type="video/mp4">
    متصفحك لا يدعم تشغيل الفيديو — يرجى تحديثه.
</video>

لنشرح كل جزء:

• width و height: أبعاد مشغّل الفيديو بالبكسل.
• controls: تُظهر أزرار التشغيل والإيقاف وشريط التقدم. بدونها لن يتمكن المستخدم من التحكم في الفيديو.
• <source src="...">: يُحدد مسار ملف الفيديو ونوعه.
• النص الأخير: يظهر فقط إذا كان المتصفح قديماً جداً ولا يدعم الوسم — وهو نادر جداً اليوم.

وسم الصوت <audio>

يعمل <audio> بنفس المنطق تماماً، لكنه يُشغّل ملفات صوتية فقط — موسيقى، بودكاست، تسجيل صوتي، أي شيء.

<audio controls>
    <source src="podcast-episode-1.mp3" type="audio/mpeg">
    متصفحك لا يدعم تشغيل الصوت — يرجى تحديثه.
</audio>

لاحظ أننا لا نُضيف width و height للصوت — لأنه لا يوجد ما يمكن عرضه، مجرد شريط تحكم صوتي.

لماذا نستخدم <source> بدلاً من src مباشرة؟

يمكنك فعلاً كتابة مسار الملف مباشرة كـ src في وسم الفيديو:

<!-- الطريقة المختصرة -->
<video src="movie.mp4" controls></video>

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

<video width="640" height="360" controls>
    <!-- المتصفح يجرب الأول، فإن لم يدعمه ينتقل للثاني -->
    <source src="movie.webm" type="video/webm">
    <source src="movie.mp4"  type="video/mp4">
    متصفحك قديم جداً ولا يدعم HTML5 Video.
</video>

جميع الخصائص المهمة

مثال عملي: فيديو احترافي بجميع الخصائص

<video
    width="800"
    height="450"
    controls
    poster="thumbnail.jpg"
    muted
    loop>
    <source src="promo-video.webm" type="video/webm">
    <source src="promo-video.mp4"  type="video/mp4">
    <p>متصفحك لا يدعم HTML5 Video. <a href="promo-video.mp4">حمّل الفيديو هنا</a></p>
</video>

هذا الفيديو يعمل بصمت حلقة متكررة (مثالي لخلفية hero section)، مع صورة مصغرة تظهر قبل التشغيل، ويوفر رابطاً للتنزيل إذا فشل كل شيء.

الصيغ المدعومة — أي ملف أستخدم؟

ليست كل المتصفحات تدعم نفس الصيغ. هذا الجدول يوضح أي صيغة تستخدم:

التوصية العملية: استخدم .mp4 للفيديو و .mp3 للصوت كخيار افتراضي. إن أردت الاحترافية الكاملة، أضف .webm كبديل أول للفيديو.

الأسئلة الشائعة — FAQ

هل أستطيع تضمين فيديو يوتيوب مباشرة بـ <video>؟

لا. وسم <video> يعمل فقط مع ملفات مستضافة على سيرفرك. لتضمين فيديو يوتيوب، استخدم <iframe> الذي سنتعلمه في الدرس القادم.

هل autoplay يعمل دائماً؟

لا. معظم المتصفحات الحديثة ترفض autoplay بالصوت حمايةً للمستخدم من المواقع المزعجة. الحل: أضف muted مع autoplay وسيعمل. بعدها إذا أراد المستخدم رفع الصوت يفعل ذلك بنفسه.

هل أحتاج لرفع الفيديو على سيرفري؟

نعم لكي يعمل <video>. لكن ملفات الفيديو ثقيلة جداً. البديل الاحترافي: ارفع الفيديو على يوتيوب أو Vimeo وضمّنه بـ <iframe>. هذا يوفر حجم السيرفر ويعطي جودة أفضل.