<source>: عنصر SOURCE
آخر تحديث: 2026-10-13
<source>عنصر SOURCE
يزود موارد الوسائط لـ audio أو video أو picture، مما يتيح عدة صيغ للتوافق أو الاستجابة.
| الفئة | الروابط والوسائط |
|---|---|
| نموذج المحتوى | عنصر فارغ |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | ذاتي الإغلاق — لا حاجة لوسم إغلاق |
| الحالة | قياسي |
📝 البنية
<source src="..." type="...">⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
src | Media resource URL. | |
type | MIME type of the resource, e.g. audio/mpeg. | |
media | Media query condition (used by picture for responsiveness). |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <source> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： source عنصر فارغ (بدون وسم إغلاق)؛ يختار المتصفح أول مصدر مدعوم.
❓ الأسئلة الشائعة
Qهل يمكن استخدام source منفردًا؟
Aلا، فـ
<source> عنصر فارغ لا يكون إلا ابنًا لـ <picture> أو <video> أو <audio>، موفرًا مرشحات موارد لأبيه، ولا يعرض شيئًا من تلقاء نفسه.Qما الفرق بين src و srcset في source؟
Aلـ video/audio استخدم
src (عنوان واحد)؛ ولمصدر picture استخدم srcset (يقبل مجموعات «عنوان + وصف عرض/كثافة بكسل» مع sizes لاختيار الصورة المتجاوبة). والمزيج الخاطئ من السمات يهمله المتصفح.Qما الذي ينبغي مراعاته في ترتيب مصادر source المتعددة؟
Aيلتقط المتصفح «أول مدعوم» من أعلى إلى أسفل، فضع الصيغ الأحدث والأحجام الأصغر في المقدمة والاحتياطي في الخاتمة (الاحتياط في picture هو img نفسها). وقلبُ الترتيب يجعل الصيغة القديمة تُلتقط أولًا فلا تستخدم الجديدة أبدًا.
🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
