تگ 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.0 | 9.0 | 3.5 | 4.0 | 10.5 |
خواص
| خاصیت | مقدار | توضیحات |
|---|---|---|
| media | media_query | برای مشخص کردن حالت های مختلف رسانه در صفحه وب استفاده می شود ( برای واکنش گرایی ) |
| sizes | اندازه های مختلف تصاویر را برای طرح بندی صفحه های مختلف مشخص می کند ( برای واکنش گرایی ) | |
| src | URL | URL یا مسیر فایل را مشخص می کند. |
| srcset | URL | مسیر فایلی را که قرار است در حالت های مختلف صفحه نمایش اجرا شود را مشخص میکند |
| type | MIME-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>آیا این مطلب برای شما مفید بود ؟
رابطه دنيا و انسان
و درود خدا بر او، فرمود: دنيا بدن ها را فرسوده، و آرزوها را تازه مى كند، مرگ را نزديك و خواسته ها را دور و دراز مى سازد، كسى كه به آن دست يافت خسته مى شود، و آن كه به دنيا نرسيد رنج مى برد.
حکمت 72 نهج البلاغه
