📌 9. الوسائط المتعددة (Multimedia)

🎵 أولًا: إدراج الصوت <audio>

🔹 ما هو <audio>؟

• عنصر لإضافة ملفات صوتية في الصفحة (موسيقى، تسجيلات، مؤثرات).

• بيدعم صيغ زي: mp3, ogg, wav.

✅ التركيب الأساسي:

🔹 الخصائص المهمة:

1. src → رابط ملف الصوت.

2. controls → لإظهار أدوات التحكم (تشغيل/إيقاف/مستوى الصوت).

3. autoplay → تشغيل الصوت تلقائيًا (لكن المتصفحات غالبًا تمنع التشغيل التلقائي إلا مع الصوت المكتوم).

4. loop → تكرار الصوت بشكل مستمر.

5. muted → جعل الصوت مكتوم افتراضيًا.

✅ مثال:

🔎 النتيجة: يظهر مشغل صوت مع إمكانية التشغيل/الإيقاف.

🎥 ثانيًا: إدراج الفيديو <video>

🔹 ما هو <video>؟

• عنصر لإضافة مقاطع فيديو للصفحة.

• بيدعم صيغ زي: mp4, webm, ogg.

✅ التركيب الأساسي:

🔹 الخصائص المهمة:

1. src → رابط الفيديو.

2. controls → لإظهار أدوات التحكم (تشغيل/إيقاف/تكبير).

3. autoplay → تشغيل الفيديو تلقائيًا (غالبًا مع muted).

4. loop → تكرار الفيديو.

5. muted → يكتم الصوت افتراضيًا.

6. width و height → حجم الفيديو.

7. poster → صورة تظهر قبل تشغيل الفيديو (صورة معاينة).

✅ مثال:

🔎 النتيجة: فيديو بحجم 500px مع صورة معاينة.

🌐 ثالثًا: إدراج محتوى خارجي <iframe> (مثال يوتيوب)

🔹 ما هو <iframe>؟

• عنصر يسمح بعرض صفحة ويب أخرى داخل صفحتك.

• مفيد لدمج فيديو من YouTube أو خرائط Google أو أي محتوى خارجي.

✅ التركيب الأساسي (يوتيوب):

🔹 شرح الخصائص:

• src → رابط الفيديو (من YouTube أو أي مصدر خارجي).

• width و height → حجم الإطار.

• frameborder=”0″ → إزالة الإطار الخارجي.

• allowfullscreen → تفعيل وضع ملء الشاشة.

• allow → يحدد الأذونات (تشغيل تلقائي، نسخ، إلخ).

🔹 مثال عملي كامل على الوسائط المتعددة

🔹 ملخص

• <audio> → لإضافة ملفات صوتية مع خصائص (controls, autoplay, loop, muted).

• <video> → لإضافة فيديوهات مع خصائص إضافية (poster, width, height).

• <iframe> → لإدراج محتوى خارجي (زي فيديوهات YouTube أو خرائط Google).