تگ source در HTML

  /  فرانت اند   /  HTML   /  تگ source در HTML

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

مثال

در مثال زیر با استفاده از تگ <source> فایل های صوتی عنصر <audio> را مشخص و اضافه کردیم:

<audio controls>
<source src="https://www.bubbleslearn.ir/wp-content/uploads/2021/05/horse.ogg" type="audio/ogg">
<source src="https://www.bubbleslearn.ir/wp-content/uploads/2021/05/horse.mp3" type="audio/mpeg">
مرورگر شما عنصر audio را پشتیبانی نمی کند
</audio>


تعریف و کاربرد

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

با استفاده از تگ <source> می توانید چندین فایل را که مرورگر ها می توانند با توجه به پشتیبانی که از فایل های رسانه ای دارند مشخص کنید و اولین <source> مشخص شده انتخاب می شود.

توضیحات بیشتر

فرض کنید یک فایل صوتی دارید که از اون فایل صوتی چندین نسخه در فرمت های مختلف مثل mp3 , ogg , aac , wav و… دارید.

حالا شما میتونید تمام این فرمت ها از فایل صوتی خودتون رو به ترتیب اولویت خودتون در تگ <source> در عنصر <audio> قرار دهید.

و مرورگر اولین تگ <source> را فراخوانی میکند و اگر نتونست اون فرمت رو اجرا کنه میره سراغ سورس بعدی و اون رو اجرا میکنه.


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

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل عنصر را پشتیبانی می کند.

عنصر
<source>4.09.03.54.010.5

خواص

خاصیتمقدارتوضیحات
mediamedia_queryبرای مشخص کردن حالت های مختلف رسانه در صفحه وب استفاده می شود ( برای واکنش گرایی )
sizesاندازه های مختلف تصاویر را برای طرح بندی صفحه های مختلف مشخص می کند ( برای واکنش گرایی )
srcURLURL یا مسیر فایل را مشخص می کند.
srcsetURLمسیر فایلی را که قرار است در حالت های مختلف صفحه نمایش اجرا شود را مشخص میکند
typeMIME-typeنوع رسانه را مشخص میکند ( مثلاً نوع رسانه فایل های ویدئویی از نوع mp4 میشه video/mp4 )

خواص عمومی

تگ source از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ source از رویداد های عمومی در HTML پشتیبانی میکند.

تنظیمات پیش فرض CSS

هیچ دستور پیش فرض CSS ندارد.

مثال های بیشتر

در مثال زیر از <source> در <picture> برای تعریف تصاویر مختلف بر اساس عرض در حالت های مختلف استفاده میکنیم:

<picture>
<source media="(min-width:650px)" srcset="https://www.bubbleslearn.ir/wp-content/uploads/2021/07/img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="https://www.bubbleslearn.ir/wp-content/uploads/2021/07/img_white_flower.jpg">
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2021/07/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

5/5 - (1 امتیاز)

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

ارسال یک نظر