تگ source در html

تگ source برای تعیین فرمت و ادرس رسانه برای عناصری مانند <video>، <audio> و <picture> استفاده می شود.

تگ <source> به شما امکان می دهد فایل‌های رسانه‌ای را با فرمت‌های مختلف قرار دهید تا در تمامی مرورگرها پشتیبانی شوند.

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio> 

تگ source می‌تواند دارای چندین ویژگی یا attribute باشد که برخی از این ویژگی‌های ضروری و برخی دیگر اختیاری هستند.

ویژگی src آدرس فایل رسانه‌ای را مشخص می کند و از ویژگی‌های ضروری این تگ است.

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> 

ویژگی srcset زمانی مورد نیاز است که تگ <source> داخل تگ <picture> به کار گرفته شود، در این حالت این ویژگی برای استفاده تصویر در موقعیت‌های قرار داده می‌شود.

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>   

ویژگی sizes از ویژگی‌های اختیاری در تگ <source> است و به مرورگر اعلام می‌کند که چگونه عرض صفحه باید با سایز‌های تصویر و تغییر اندازه‌های مختلف آن ترکیب شود.

<video controls>
  <source src="video.mp4" type="video/mp4" sizes="(min-width: 1024px) 50vw, 100vw">
  <source src="video.webm" type="video/webm" sizes="(min-width: 1024px) 50vw, 100vw">
  Your browser does not support the video tag.
</video>
  

ویژگی type فرمت رسانه (که قبلاً به عنوان نوع MIME شناخته می شد) را مشخص می کند. برخی از مقادیر عبارتند از:

• video/ogg
• video/mp4
• video/webm
• audio/ogg
• audio/mpeg

<audio controls muted>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

تگ <source> از Global Attributes در HTML پشتیبانی می کند.

تگ <source> از Event Attributes in HTML در HTML پشتیبانی می کند.

اکثر مرورگرها تگ <source> را با مقادیر پیش فرض زیر نمایش می دهند:

source {
  display: none;
}