تگ source در HTML

در این مقاله با تگ source در HTML آشنا می شوید.

نکات اصلی تگ source

• تگ های source چندین منبع را برای عناصر رسانه ای مشخص می کنند.
• نیازی به استفاده از تگ بسته نیست زیرا عنصر source در HTML خالی است.
• جدا از ویژگی های خاص تگ، عنصر source از ویژگی های جهانی نیز پشتیبانی می کند.
• این به تازگی در HTML5 معرفی شده است.

تعریف منابع تگ source در HTML

از عنصرهای source در HTML برای تعریف چندین منبع رسانه برای عناصر <audio> و <video> و <picture> استفاده می شود. سپس مرورگر منبع را بر اساس کدکها و نوع پشتیبانی از رسانه انتخاب می کند:

<audio controls>
  <source src="melody.mp3" type="audio/mpeg">
  <source src="melody.ogg" type="audio/ogg">
  This text will be displayed if the browser does not support the audio element.
</audio>

ویژگی های تگ source

پنج ویژگی وجود دارد که می توانید با تگ های source در HTML استفاده کنید. با این حال ، همه آن ها با هر نوع عنصر رسانه ای قابل استفاده نیستند.

type نوع رسانه (که به آن نوع MIME نیز گفته می شود) محتوای تعبیه شده را تعریف می کند:

<audio controls>
  <source src="melody.mp3" type="audio/mpeg">
  <source src="melody.ogg" type="audio/ogg">
  This text will be displayed if the browser does not support the audio element.
</audio>

src URL فایل رسانه را برای عناصر <audio> و <video> تعریف می کند:

<audio controls>
  <source src="melody.mp3" type="audio/mpeg">
  <source src="melody.ogg" type="audio/ogg">
  This text will be displayed if the browser does not support the audio element.
</audio>

توجه: اگر عنصر منبع HTML در یک عنصر تصویر واقع شده باشد ، مقدار src نادیده گرفته می شود.

srcset و ویژگی های رسانه فقط با عناصر <picture> قابل استفاده هستند. srcset یک URL از تصویر را برای عنصر تعریف می کند ، و media یک کوئری رسانه را در CSS تعیین می کند:

<picture>
  <source srcset="SpaceDogg.png" media="(min-width: 550px)">
  <img src="alt_SpaceDogg.png" alt="SpaceDogg">
</picture>

توجه: همچنین می توانید از اندازه هایی استفاده کنید که لیستی از اندازه منبع تصویر HTML است و عرض تصویر ارائه شده را مشخص می کند. مرورگرها از آن برای انتخاب منبع تصویر HTML مناسب استفاده می کنند.

پشتیبانی از مرورگر

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.