علامة <source> في HTML
التعريف والاستخدام
<source> العلامة تستخدم لتحديد عناصر وسائط (مثل <video>،<audio> و <picture>）لتعيين موارد وسائط متعددة.
<source> العلامة تسمح لك بتخصيص ملفات الفيديو/الصوت/الصورة الاحتياطية، وسيختار المتصفح أولاً الذي يدعمه بناءً على دعم المتصفح أو عرض النافذة. سيختار المتصفح أولاً الذي يدعمه. <source>.
انظر أيضًا:
دليل HTML:فيديو HTML
دليل HTML:موسيقى HTML
دليل HTML DOM:مثل
مثال
مثال 1
هذا هو مشغل الصوت الذي يحتوي على ملفين مصدرين. سيختار المتصفح أولاً الذي يدعمه. <source>:
<audio controls> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> لم يكن متوفرًا دعم ميزة العلامة <audio> في متصفحك. </audio>
مثال 2
استخدامها في <video> <source> تشغيل الفيديو:
<video width="640" height="400" controls> <source src="shanghai.mp4" type="video/mp4"> <source src="shanghai.ogg" type="video/ogg"> لم يكن متوفرًا دعم ميزة العلامة <video> في متصفحك. </video>
مثال 3
استخدامها في <picture> <source> لتحديد صور مختلفة بناءً على عرض النافذة:
<picture> <source media="(min-width:650px)" srcset="flowers-1.jpg"> <source media="(min-width:465px)" srcset="flowers-2.jpg"> <img src="flowers-3.jpg" alt="Flowers" style="width:auto;"> </picture>
الخصائص
| الخصائص | القيمة | وصف |
|---|---|---|
| media | استعلام وسائط | يقبل أي استعلام وسائط صالح، عادةً ما يتم تعريفها في CSS. |
| sizes | لتعيين حجم الصورة للتنسيقات المختلفة للصفحة. | |
| src | URL |
لتحديد عنوان ملف الوسائط. عند استخدام <source> مع <audio> و <video>، هذا الخصائص هو مطلوب. |
| srcset | URL |
يُستخدم لتحديد URL للصورة المستخدمة في حالات مختلفة. عند استخدام <source> مع <picture>، هذا الخصائص هو ضروري. |
| type | نوع MIME | يحدد نوع MIME للمورد. |
خصائص العالمية
<source> يدعم العلامة خصائص العالمية في HTML.
خصائص الحدث
<source> يدعم العلامة خصائص الحدث في HTML.
إعدادات CSS الافتراضية
لا يوجد.
دعم المتصفح
الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم هذه الخاصية بشكل كامل.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
