HTML source Tag
HTML source Tag – يحدد الوسم <source> مصادر وسائط متعددة لوسم <picture> أو <audio> أو <video>.
HTML source Tag
الوسم <source> عنصر فارغ (أى لا يحتوي على محتوى ولا يحتوي على وسم إغلاق).
مثال للتوضيح
إستخدام الوسم <source> لتحديد مصادر الفيديو:
<video controls="controls"> <source src="/videos/laptop.mp4" type="video/ogg"> <source src="/videos/laptop.mp4" type="video/mp4"> Your browser doesn't support Video tag! </video>
يتم استخدام الوسم <source> بشكل شائع لتقديم نفس محتوى الوسائط بتنسيقات ملفات متعددة من أجل توفير التوافق مع مجموعة واسعة من المتصفحات نظرًا لاختلاف دعمها لتنسيقات ملفات الصور وتنسيقات ملفات الوسائط.
أمثلة | <source>
1. إستخدام <source> مع <picture>
<picture> <source srcset="/images/image1.png" media="(min-width: 900px)"> <source srcset="/images/image2.png" media="(min-width: 500px)"> <img src="/images/general_image.png" alt="Person Image"> </picture>
2. إستخدام <source> مع <audio>
<audio controls="controls"> <source src="/audio/Crash.mp3" type="audio/ogg"> <source src="/audio/Crash.mp3" type="audio/mpeg"> Your browser doesn't support Audio tag! </audio>
السمات المحددة – Specific Attributes
يدعم الوسم <source> هذه السمات:
السمة | القيمة | الوصف |
---|---|---|
media | media_query | يقبل أي استعلام وسائط صالح للمصدر. تٌستخدم هذه السمة مع الوسم <picture> فقط. |
sizes | يحدد أحجام الصور لتخطيطات الصفحات المختلفة. يتكون كل حجم مصدر من قائمة مفصولة بفواصل لأزواج طول شروط الوسائط. يتم استخدام هذه المعلومات بواسطة المستعرض لتحديد الصورة المحددة في srcset المراد استخدامها قبل وضع الصفحة. | |
src | URL | يحدد عنوان URL لملف الوسائط. مطلوبة عند استخدام <source> في <audio> و <video>. |
srcset | URL | يحدد عنوان URL للصورة لاستخدامه في مواقف مختلفة. مطلوبة عند استخدام <source> في <picture>. |
type | MIME-type | يحدد MIME-type للمصدر. |
السمات العامة – Global Attributes
الوسم <source> يدعم السمات العامة، تعرف عليهم عن طريق هذا الرابط: السمات العامة – Global Attributes.
سمات الحدث – Event Attributes
كما يدعم الوسم <source> سمات الحدث أيضًا، تعرف عليهم عن طريق هذا الرابط: سمات الحدث – Event Attributes.
إقرأ أيضًا – HTML <source> Tag
الوسوم المتعلقة: <audio> – <video> – <picture>.
دعم المتصفحات
![]() | ![]() | ![]() | ![]() | ![]() |
3.5 | 4.0 | 9.0 | 4.0 | 10.5 |
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!