إدراج الفيديو والصوت في HTML: شرح وسمي video و audio مع أمثلة
بعد التعرف على العناصر الدلالية مثل header و nav و footer، ننتقل الآن إلى عناصر الوسائط المتعددة في HTML، وهي الفيديو والصوت. هذه العناصر تسمح بإضافة محتوى تفاعلي مثل الشروحات المرئية، المقاطع التعليمية، أو التسجيلات الصوتية. في هذا الدرس سنتعلم كيفية إدراج الفيديو والصوت باستخدام HTML فقط بدون أي مكتبات خارجية.
ما هي الوسائط المتعددة في HTML؟
الوسائط المتعددة هي محتوى غير نصي مثل الفيديوهات والمقاطع الصوتية. HTML توفر وسوماً مدمجة تسمح بعرض هذه الوسائط مباشرة داخل المتصفح، بدون الحاجة إلى برامج إضافية.
وسم video في HTML
وسم video يُستخدم لإدراج مقاطع الفيديو داخل صفحة الويب. يدعم عدة صيغ مثل MP4 و WebM. يُنصح دائمًا باستخدام صيغة MP4 لأنها مدعومة من أغلب المتصفحات.
مثال على إدراج فيديو
<video controls width="600"> <source src="video.mp4" type="video/mp4"> المتصفح لا يدعم تشغيل الفيديو </video>
الخاصية controls تُظهر أزرار التشغيل، مثل التشغيل، الإيقاف، والتحكم في الصوت. يمكن التحكم في حجم الفيديو باستخدام خاصيتي width و height.
وسم audio في HTML
وسم audio يُستخدم لإدراج ملفات صوتية مثل الدروس الصوتية أو المؤثرات. يدعم صيغًا مثل MP3 و OGG. أكثر صيغة استخدامًا هي MP3.
مثال على إدراج صوت
<audio controls> <source src="audio.mp3" type="audio/mpeg"> المتصفح لا يدعم تشغيل الصوت </audio>
كما هو الحال مع الفيديو، الخاصية controls ضرورية للسماح للمستخدم بالتحكم في التشغيل.
خصائص مهمة لوسمي video و audio
من الخصائص المهمة: autoplay للتشغيل التلقائي، loop لإعادة التشغيل، و muted لكتم الصوت. يُفضل عدم استخدام autoplay حتى لا يزعج المستخدم.
استخدام الوسائط مع CSS
يمكن تنسيق الفيديو والصوت وتحسين مظهرهما باستخدام CSS. HTML تهتم بإدراج الوسائط، بينما CSS تهتم بالشكل والتخطيط.
أخطاء شائعة عند إدراج الفيديو والصوت
من الأخطاء الشائعة استخدام صيغ غير مدعومة، أو رفع ملفات كبيرة الحجم تؤثر على سرعة الموقع. يُنصح بضغط الملفات واستعمال حجم مناسب للعرض.
مصادر إضافية للتعلم
للمزيد من التفاصيل يمكنك الرجوع إلى MDN Web Docs أو موقع W3Schools .
خلاصة
إدراج الفيديو والصوت في HTML يسمح بإنشاء صفحات تفاعلية وغنية بالمحتوى. بفهم وسمي video و audio ستتمكن من إضافة شروحات مرئية وصوتية تعزز تجربة المستخدم بشكل كبير.