HTMLالوسم <source>

تعريفه

بشكل عام نستخدم الوسم <source> بداخل الوسم <audio> أو <video> أو <picture> لتجهيز عدة صيغ للملف الصوتي، الفيديو أو الصور المراد عرضها في الصفحة لضمان أن يتمكن المتصفح من عرضها للمستخدم مهما كان نوع المتصفح الذي يستخدمه.

الملف الذي يتم وضعها بواسطة الوسم <source> يجب تحديد مساره و نوعه على النحو التالي.

<source src="file-path" type="file-type">

• مكان الكلمة file-path نقوم بوضع مسار الملف المراد عرضه في الصفحة.
• مكان الكلمة file-type نقوم بوضع نوع الملف المراد عرضه بأسلوب MIME.

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <source>.

خصائصه

الخاصية src

نضيفها للوسم لتحديد مسار الملف الذي سيتم عرضه في الصفحة.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية type

نضيفها للوسم لتحديد نوع المحتوى المراد عرضه في الوسم بأسلوب MIME.
كمثال بسيط، إذا أردت الإشارة إلى أن المسار الموضوع يشير لصورة نوعها png يجب إضافة الخاصية type="image/png" للوسم.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية media

يمكن إضافتها للوسم <source> في حال كان موضوعاً بداخل وسم <picture> لوضع شرط على أساسه إما يتم عرض الصورة الموضوعة في الوسم <source> أو لا يتم.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية sizes

يمكن إضافتها للوسم <source> في حال كان موضوعاً بداخل وسم <picture> لجعل حجم الصورة التي يتم عرضها يظهر بشكل متجاوب ( Responsive ) مع حجم الصفحة، مع الإشارة إلى أن هذه الخاصية تعمل فقط في حال كان المتصفح سيعرض إحدى الصور الموضوع مسارها بواسطة الخاصية srcset و التي تم تحديد قياسها أيضاً بالإعتماد على الحرف w.

ملاحظة: في حال كان حجم الصورة في الصفحة محدد بواسطة CSS فإن المتصفح سيتجاهل خصائص تحديد حجم الصورة التي تم وضعها بواسطة الخاصية sizes.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية srcset

يمكن إضافتها للوسم <source> في حال كان موضوعاً بداخل وسم <picture> لتجهيز صور أحجامها مختلفة و على حسب حجم الشاشة يتم عرض الصورة التي يتناسب حجمها معها.
مسار أي صورة يتمريره لها يجب تمرير عرض الشاشة معه الذي على أساسه سيتم اختيار الصورة و هذا الأمر يمكن فعله بأسلوبين كالتالي:

• إضافة الحرف w لتحديد عرض الشاشة الذي على أساسه سيتم تحميل الصورة بالبكسل.
• إضافة الحرف x لتحديد عرض الشاشة الذي على أساسه سيتم تحميل الصورة بشكل تقريبي.

لا تقلق ستفهم ما نقصده بالحرفين w و x لاحقاً من الأمثلة.

معلومة: إنتبه في حال قام المتصفح مسبقاً بتحميل الصورة التي حجمها كبير ثم قمت بتصغير الشاشة و تحديثها من جديد فإنه سيظهر أيضاً الصورة التي حجمها كبير و سبب ذلك أن المتصفح يقوم بتخزين الصور التي يتم عرضها في الصفحة حتى لا يطلبها مجدداً إذا طلبت مشاهدتها مرة أخرى.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

إستخدامه

في المثال التالي قمنا بإضافة ملف صوتي في الصفحة مع إظهار أزرار التحكم به.

سبب إضافة وسمين <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>

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له.