HTMLالوسم <source>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
تعريفه
بشكل عام نستخدم الوسم <source>
بداخل الوسم <audio>
أو <video>
أو <picture>
لتجهيز عدة صيغ للملف الصوتي، الفيديو أو الصور المراد عرضها في الصفحة لضمان أن يتمكن المتصفح من عرضها للمستخدم مهما كان نوع المتصفح الذي يستخدمه.
الملف الذي يتم وضعها بواسطة الوسم <source>
يجب تحديد مساره و نوعه على النحو التالي.
<source src="file-path" type="file-type">
- مكان الكلمة
file-path
نقوم بوضع مسار الملف المراد عرضه في الصفحة. - مكان الكلمة
file-type
نقوم بوضع نوع الملف المراد عرضه بأسلوب MIME.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <source>
.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | 3.5 | مدعوم | مدعوم | مدعوم | مدعوم | 4 | ؟ | مدعوم | مدعوم |
خصائصه
الخاصية src
نضيفها للوسم لتحديد مسار الملف الذي سيتم عرضه في الصفحة.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | 3.5 | مدعوم | مدعوم | مدعوم | مدعوم | 4 | ؟ | مدعوم | مدعوم |
الخاصية type
نضيفها للوسم لتحديد نوع المحتوى المراد عرضه في الوسم بأسلوب MIME.
كمثال بسيط، إذا أردت الإشارة إلى أن المسار الموضوع يشير لصورة نوعها png يجب إضافة الخاصية type="image/png"
للوسم.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | 3.5 | مدعوم | مدعوم | مدعوم | مدعوم | 4 | ؟ | مدعوم | مدعوم |
الخاصية media
يمكن إضافتها للوسم <source>
في حال كان موضوعاً بداخل وسم <picture>
لوضع شرط على أساسه إما يتم عرض الصورة الموضوعة في الوسم <source>
أو لا يتم.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | 15 | مدعوم | مدعوم | مدعوم | مدعوم | 15 | ؟ | مدعوم | مدعوم |
الخاصية sizes
يمكن إضافتها للوسم <source>
في حال كان موضوعاً بداخل وسم <picture>
لجعل حجم الصورة التي يتم عرضها يظهر بشكل متجاوب ( Responsive ) مع حجم الصفحة، مع الإشارة إلى أن هذه الخاصية تعمل فقط في حال كان المتصفح سيعرض إحدى الصور الموضوع مسارها بواسطة الخاصية srcset
و التي تم تحديد قياسها أيضاً بالإعتماد على الحرف w
.
ملاحظة: في حال كان حجم الصورة في الصفحة محدد بواسطة CSS فإن المتصفح سيتجاهل خصائص تحديد حجم الصورة التي تم وضعها بواسطة الخاصية sizes
.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | ≤18 | 38 | مدعوم | 9 | مدعوم | مدعوم | 38 | ؟ | 9 | مدعوم |
الخاصية srcset
يمكن إضافتها للوسم <source>
في حال كان موضوعاً بداخل وسم <picture>
لتجهيز صور أحجامها مختلفة و على حسب حجم الشاشة يتم عرض الصورة التي يتناسب حجمها معها.
مسار أي صورة يتمريره لها يجب تمرير عرض الشاشة معه الذي على أساسه سيتم اختيار الصورة و هذا الأمر يمكن فعله بأسلوبين كالتالي:
- إضافة الحرف
w
لتحديد عرض الشاشة الذي على أساسه سيتم تحميل الصورة بالبكسل. - إضافة الحرف
x
لتحديد عرض الشاشة الذي على أساسه سيتم تحميل الصورة بشكل تقريبي.
لا تقلق ستفهم ما نقصده بالحرفين w
و x
لاحقاً من الأمثلة.
معلومة: إنتبه في حال قام المتصفح مسبقاً بتحميل الصورة التي حجمها كبير ثم قمت بتصغير الشاشة و تحديثها من جديد فإنه سيظهر أيضاً الصورة التي حجمها كبير و سبب ذلك أن المتصفح يقوم بتخزين الصور التي يتم عرضها في الصفحة حتى لا يطلبها مجدداً إذا طلبت مشاهدتها مرة أخرى.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
34 | ≤18 | 38 | مدعوم | 9 | مدعوم | مدعوم | 38 | ؟ | 9 | مدعوم |
إستخدامه
في المثال التالي قمنا بإضافة ملف صوتي في الصفحة مع إظهار أزرار التحكم به.
سبب إضافة وسمين <source>
هو أننا قمنا بتجهيز نسختين من نفس الملف الصوتي, الأولى نوعها .mp3
و الثانية نوعها .ogg
بهدف جعل المتصفح يحاول تشغيل أول ملف صوتي موضوع, و إن لم ينجح سيحاول تشغيل الملف الصوتي الثاني.
النص Your browser does not support the audio tag!
يتم عرضه في الصفحة في حال كان متصفح المستخدم لا يدعم تشغيل الملف الصوتي من الأساس.
المثال الأول
<audio controls> <source src="like-ras.mp3" type="audio/mpeg"> <source src="like-ras.ogg" type="audio/ogg"> Your browser does not support the audio tag! </audio>
في المثال التالي قمنا بإضافة فيديو في الصفحة مع إظهار أزرار التحكم بالفيديو و تحديد أن عرضه 360 بكسل و طوله 200 بكسل.
سبب إضافة وسمين <source>
هو أننا قمنا بتجهيز نسختين من نفس الفيديو، الأولى نوعها .mp4
و الثانية نوعها .ogg
بهدف جعل المتصفح يحاول تشغيل أول فيديو موضوع، و إن لم ينجح سيحاول تشغيل الفيديو الثاني.
النص Your browser does not support the video tag!
يتم عرضه في الصفحة في حال كان متصفح المستخدم لا يدعم تشغيل الفيديو من الأساس.
المثال الثاني
<video width="360" height="200" controls> <source src="iron-man-mark-2.mp4" type="video/mp4"> <source src="iron-man-mark-2.ogg" type="video/ogg"> Your browser does not support the video tag! </video>
في المثال التالي قمنا باستخدام الوسم <picture>
لتجهيز ثلاث صور يتم عرض واحدة منها فقط نسبةً لحجم الشاشة:
- الصورة الأولى وضعناها بداخل الوسم
<source>
و حددنا أنه يجب عرضها في حال كان حجم الشاشة أكبر أو يساوي من600
بكسل. - الصورة الثانية التي وضعناها بداخل الوسم
<source>
و حددنا أنه يجب عرضها في حال كان حجم الشاشة أكبر أو يساوي من450
بكسل. - الصورة الثالثة التي وضعناها بداخل الوسم
<img>
يتم عرضها في حال لم يتم عرض أي صورة وضعناها قبلها.
المثال الثالث
<picture> <source media="(min-width:600px)" srcset="pic-1.jpg"> <source media="(min-width:450px)" srcset="pic-2.jpg"> <img alt="Default Image" style="width: auto;" src="default.jpg"> </picture>
في المثال التالي قمنا باستخدام الخاصية sizes
لجعل حجم الصورة التي يقرر المتصفح تحميلها تظهر بشكل متجاوب أيضاً مع حجم الصفحة بالشكل الذي نحدده لها.
هنا بعد أن يتم تحميل الصورة التي تتناسب مع عرض شاشة المستخدم, سيقوم المتصفح بعرضها بحجم 100 × 100
إذا كان عرض الصفحة لا يتجاوز 600
بكسل، غير ذلك فإنه يعرضها بحجم 200 × 200
مهما كان حجم الصفحة كبيراً.
ملاحظة: القيم التي نمررها للخاصية sizes
بداخل القوسين نضعها بالوحدة بكسل, أما القيمتين اللتين نضعهما بعد القوسين فيمكن وضعهما بأسلوب مسموح في لغة CSS لتحديد الحجم.
المثال الرابع
<picture> <source srcset="small.PNG 500w, medium.PNG 1500w" sizes="(max-width: 600px) 100px, 200px" type="image/png"> <img src="default.PNG"> </picture>
تصميمه الإفتراضي
لا يوجد تصميم إفتراضي له.