شرح العنصر (source) في لغة HTML

الشرح الكامل والشامل لعنصر <source> في HTML

HTML

مقدمة عن عنصر <source>

عنصر <source> هو عنصر HTML يُستخدم لتحديد مصادر وسائط متعددة لعناصر الوسائط مثل <picture>، <audio>، و <video>. يسمح هذا العنصر للمتصفح باختيار أنسب مصدر للوسائط بناءً على معايير مختلفة مثل نوع الملف ودقة الشاشة وتفضيلات المستخدم.

الاستخدامات الرئيسية لعنصر <source>

1 مع عنصر <picture>

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="صورة توضيحية">
</picture>

2 مع عنصر <audio>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  المتصفح الخاص بك لا يدعم عنصر الصوت.
</audio>

3 مع عنصر <video>

<video controls width="250">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  المتصفح الخاص بك لا يدعم عنصر الفيديو.
</video>

السمات (Attributes) الرئيسية لعنصر <source>

1 src (مطلوب في بعض الحالات)

• تحدد مسار ملف الوسائط
• مطلوب عند استخدامه مع <audio> أو <video>
• غير مطلوب عند استخدامه مع <picture> (حيث يتم استخدام srcset بدلاً منه)

2 srcset

• تستخدم مع <picture> لتحديد مصادر الصور المختلفة
• يمكن أن تحتوي على عدة مصادر مفصولة بفواصل

<source srcset="image-1x.jpg 1x, image-2x.jpg 2x">

3 type

• تحدد نوع MIME للملف
• تساعد المتصفح على تحديد ما إذا كان يمكنه تشغيل الملف دون الحاجة إلى تحميله أولاً

<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">

4media

• تحدد استعلام وسائط (media query) لتطبيق المصدر
• تستخدم بشكل رئيسي مع <picture>

<source media="(min-width: 1200px)" srcset="large.jpg">

5sizes

• تستخدم مع <picture> لتحديد حجم العرض المتوقع للصورة

<source srcset="large.jpg" media="(min-width: 800px)" sizes="50vw">

أمثلة متقدمة

1دعم الصور بتنسيقات مختلفة

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="صورة بديلة">
</picture>

2 فيديو بتنسيقات ودقة مختلفة

<video controls>
  <source src="video-high.webm" type="video/webm; codecs=vp9" media="(min-width: 1080px)">
  <source src="video-low.webm" type="video/webm; codecs=vp9">
  <source src="video-high.mp4" type="video/mp4" media="(min-width: 1080px)">
  <source src="video-low.mp4" type="video/mp4">
</video>

3 دعم لغات مختلفة للصوت

<audio controls>
  <source src="audio-en.mp3" type="audio/mpeg" title="English">
  <source src="audio-ar.mp3" type="audio/mpeg" title="العربية">
</audio>

أفضل الممارسات لاستخدام <source>

• ترتيب المصادر: ضع المصادر الأكثر تفضيلاً أولاً، حيث سيتوقف المتصفح عند أول مصدر يمكنه تشغيله.
• تحديد نوع MIME: استخدم سمة type لمساعدة المتصفح على اتخاذ القرار دون الحاجة إلى تحميل الملف أولاً.
• توفير بديل: دائماً وفر محتوى بديل داخل عناصر <audio> و <video> لعرض رسالة عندما لا يدعم المتصفح العنصر.
• تحسين الأداء: استخدم srcset و sizes مع الصور لتحميل الصور المناسبة لكل جهاز.
• اختبار المتصفحات: تأكد من اختبار التنسيقات المختلفة في متصفحات مختلفة.

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

عنصر <source> مدعوم بشكل جيد في جميع المتصفحات الحديثة:

Chrome

مدعوم بالكامل

Firefox

مدعوم بالكامل

Safari

مدعوم بالكامل

Edge

مدعوم بالكامل

Internet Explorer

منذ الإصدارات القديمة

Opera

مدعوم بالكامل

الخلاصة

عنصر <source> هو أداة قوية لتحسين تجربة الوسائط على الويب، حيث يسمح بـ:

• تقديم محتوى مناسب لكل جهاز ومتصفح
• تحسين أداء الصفحات من خلال تحميل الوسائط المناسبة
• دعم التنسيقات الحديثة مع الحفاظ على التوافق مع المتصفحات القديمة
• توفير تجربة مستخدم أفضل من خلال التكيف مع ظروف التشغيل المختلفة

باستخدام <source> بشكل صحيح، يمكنك ضمان أن الوسائط على موقعك ستظهر بشكل مثالي عبر جميع الأجهزة والمتصفحات.

كيف كان المقال؟