الكورس

Advertisements

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> هذه السمات:

السمةالقيمةالوصف
mediamedia_queryيقبل أي استعلام وسائط صالح للمصدر.
تٌستخدم هذه السمة مع الوسم <picture> فقط.
sizesيحدد أحجام الصور لتخطيطات الصفحات المختلفة. يتكون كل حجم مصدر من قائمة مفصولة بفواصل لأزواج طول شروط الوسائط.
يتم استخدام هذه المعلومات بواسطة المستعرض لتحديد الصورة المحددة في srcset المراد استخدامها قبل وضع الصفحة.
srcURLيحدد عنوان URL لملف الوسائط.
مطلوبة عند استخدام <source> في <audio> و <video>.
srcsetURLيحدد عنوان URL للصورة لاستخدامه في مواقف مختلفة.
مطلوبة عند استخدام <source> في <picture>.
typeMIME-typeيحدد MIME-type للمصدر.

Advertisements

 

السمات العامة – Global Attributes

 

الوسم <source> يدعم السمات العامة، تعرف عليهم عن طريق هذا الرابط: السمات العامة – Global Attributes.

 


 

سمات الحدث – Event Attributes

 

كما يدعم الوسم <source> سمات الحدث أيضًا، تعرف عليهم عن طريق هذا الرابط: سمات الحدثEvent Attributes.

 


 

إقرأ أيضًا – HTML <source> Tag

 

الوسوم المتعلقة: <audio> – <video> – <picture>.

 


 

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

 

firefox - الباشمبرمجCHROME - الباشمبرمجIE - الباشمبرمجsafari - الباشمبرمجopera - الباشمبرمج
3.54.09.04.010.5


الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements