العنصر `<source>`

يُحدِّد العنصر <source> عدِّة مصادر لملفات الوسائط المتعددة ضمن العنصر <picture> أو <audio> أو <video>. وهذا العنصر فارغ، وأكثر استخدام شائع له هو توفير محتوى الوسائط المتعددة نفسه لكن بصيغ مختلفة لكي يستطيع المتصفح تشغيل أنسبها.

يشرح هذا المثال كيفية توفير مقطع فيديو بصيغة webm لمن يدعم متصفحه فيديو WebM، وتوفير المقطع بصيغة MP4 للمستخدمين الذين يدعم متصفحهم هذه الصيغة.

إن لم يكن العنصر <audio> أو <video> مدعومًا من المتصفح فستظهر رسالة تنبه المستخدم إلى ذلك؛ وإن لم يكن المتصفح قادرًا على تشغيل أي صيغة متاحة، فسيقع الحدث error وستُشير عناصر التحكم الافتراضية (إن كانت مُفعّلةً) إلى خطأ.

<video>
  <source src="khamsat.webm" type="video/webm">
  <source src="khamsat.mp4" type="video/mp4">
  لا يدعم متصفحك العنصر <code>video</code>.
</video>

يبيّن هذه المثال كيفية تضمين مقطع صوتي باستخدام العنصر <audio> وله أكثر من مصدر، أحدها بصيغة Ogg والآخر بصيغة MP3:

<audio controls="controls">
  <source src="khamsat.ogg" type="audio/ogg">
  <source src="khamsat.mp3" type="audio/mpeg">
  لا يدعم متصفحك العنصر <code>audio</code>.
</audio>

بطاقة العنصر

تصنيفات المحتوى	لا يوجد.
المحتوى المسموح	لا يوجد، فهو عنصرٌ فارغ.
الوسم المختصر	يجب أن يكون وسم البداية موجودًا، ويجب أن يُحذَف وسم النهاية.
العناصر الأب	عنصر <audio> أو `<video>` ويجب أن يكون موجودًا قبل أي محتوى فيهما وقبل العنصر `<track>`. أو عنصر `<picture>` ويجب أن يوضع قبل العنصر `<img>`.
واجهة DOM	`HTMLSourceElement`

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

`sizes`

أُضيفت هذه الخاصية في HTML5، وهي تقبل سلسلة نصية فيها قيمة أو أكثر (مفصولة بفاصلة) لمصادر القياسات المختلفة للصور. يجب أن يحتوي كل مصدر على:

عبارة media query، والتي يجب حذفها في آخر عنصر في القائمة.
قيمة لقياس الصورة

قيمة قياس الصورة تُحدِّد ما هو حجم الصورة المراد عرضه، وتستخدم المتصفحات عبارة media query لتحديد أحد مصادر الصورة المُعرَّفة في خاصية srcset، وذلك عندما تقترن تلك المصادر مع مُحدِّدات العرض (w).

يؤثر حجم الصورة المُختارة على الحجم الصافي للصورة (أي الحجم الذي ستُعرَض فيه الصورة إن لم تُطبَّق قواعد CSS عليها).

إذا كانت الخاصية srcset غير موجودة، أو كانت لا تحتوي على أيّة قيمة فيها مُحدِّد العرض w، فلن يكون للخاصية sizes أي أثر.

ولن يكون للخاصية sizes أي أثر إن لم يكن العنصر <source> ابنًا مباشرًا للعنصر <picture>.

`src`

هذه الخاصية مطلوبة إذا كان العنصر <source> ابنًا لأحد العنصرين <audio> أو <video>، وتُحدِّد رابط ملف الوسائط المتعددة.

سيتم تجاهل هذه الخاصية إن وضعت داخل العنصر <picture>.

`srcset`

قائمة أو أكثر من السلاسل النصية المفصولة بفاصلة , التي تُشير إلى مجموعة من مصادر الصورة المحتملة لكي يستخدم إحداها المتصفح.

تتألف كل سلسلة نصية من محتويات هذه الخاصية من:

رابط URL لملف الصورة
(اختياريًا) فراغ يتبعه أحد المُحدِّدات الآتية
- مُحدِّد العرض الذي هو عدد صحيح موجب يتبعه الحرف w، وستُقسَّم قيمة مُحدِّد العرض على الحجم المصدري المُعطى في خاصية sizes لحساب كثافة البكسلات الفعلية.
- مُحدِّد كثافة البكسلات التي هو عددٌ عشري موجب يتبعه الحرف xمباشرةً.

إذا لم تعطى قيمة لأحد المُحدِّدَين السابقين فسيُسنَد للمصدر المُحدِّد الافتراضي 1x.

من غير السليم استخدام مُحدِّد العرض مع مُحدِّد الكثافة في نفس خاصية srcset، ومن غير السليم تكرار المُحدِّدات (أي لا يجوز أن يكون لمصدرين مختلفين في نفس الخاصية srcset مُحدِّد الكثافة 2x).

سيختار المتصفح أحد المصادر المذكورة في هذه الخاصية حسب تقديره، مما يعطي المتصفحات مجالًا لاختيار أفضل قياس للصورة اعتمادًا على تفضيلات المستخدم أو لتقييد استخدام التراسل الشبكي.

لن يكون للخاصية srcset أي أثر إن لم يكن العنصر <source> ابنًا مباشرًا للعنصر <picture>.

`type`

نوع MIME مع إمكانية تحديد المعامل codecs للتصريح عن المرمازات المستخدمة، راجع RFC 4281 لمعلومات عن صيغة كتابة المرمازات.

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

`media`

تعبير media query للمورد المُحدَّد، ولا يجوز أن تستعمل هذه الخاصية إلا ضمن عنصر <picture>.

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.