تگ source در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ source در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

تگ source چیست؟

تگ source برای افزودن آدرس فایل و سازماندهی آن در تگ picture، تگ video و تگ audio به کار می رود.

ساختار این تگ به شکل زیر است و نیاز به بستن ندارد.

<source src="URL">

صفات تگ source

در این بخش با صفات تگ source آشنا خواهید شد.

صفت media

برای واکنشگرایی عناصر به کار می رود.

<source media="VALUE">

در صورتی که از تگ source برای تگ picture استفاده کنیم می توانیم متناسب با اندازه صفحه نمایش دستگاه، تصاویر را نمایش دهیم.

مثلا در کد زیر اگر اندازه عرض صفحه نمایش کاربر کوچکتر از 600 پیکسل بود فایل image1.jpg نمایش داده می شود و در غیر این صورت فایل image2.jpg نمایش داده می شود.

<picture>
  <source media="(max-width: 600px)" srcset="image1.jpg">
  <img src="image2.jpg">
</picture>

صفت src

برای افزودن آدرس فایل به کار می رود.

<source src="URL">

صفت srcset

در صورتی که از تگ source برای تگ picture استفاده کنیم می توانیم آدرس فایل تصویر و تنظیمات واکنشگرایی تصویر را اعمال کنیم.

<source srcset="VALUE">

صفت type

نوع رسانه را مشخص می کند.

<source type="VALUE">

به عنوان مثال اگر فایل، تصویری با فرمت png باشد نوع رسانه آن به شکل زیر است:

<source type="image/png">

مثال های تگ source

مثال برای تگ picture:

<picture>
  <source media="(min-width: 1000px)" srcset="image1.jpg">
  <source media="(min-width: 300px)" srcset="image2.jpg">
  <img src="image3.jpg">
</picture>

مثال برای تگ video:

<video width="300" height="100" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

مثال برای تگ audio:

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.ogg" type="audio/ogg">
</video>

سازگاری با مرورگرها

تگ source با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS