آموزش تگ source در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ source در HTML با من همراه باشید.
Free-Learn
در این جلسه میخوانیم
تگ Source در HTML
تگ source تگی است که با استفاده از آن میتوان یک سورس / منبع یا بطور کلی مسیر یک فایل را برای تگ های چندرسانه ای همچون Audio و Video مشخص کرد.
معمولا از این تگ برای مشخص کردن منبع یا همون مسیر فایل صوتی یا ویدئویی در تگ های چندرسانه ای مثه Audio و Video استفاده می شود.
Free-Learn
مثال از تگ source در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 |
<body> <audio controls> <source src="music/demo.mp3" type="audio/mpeg"> شرمنده،مرورگر شما از تگ صدا پشتیبانی نمی کند </audio> </body> |
مثال شماره ۲ : استفاده از تگ source درون تگ Video برای نمایش یک ویدئو در صفحه وب
|
1 2 3 4 5 6 7 |
<body> <video controls> <source src="video/demo.mp4" type="video/mp4"> </video> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ source در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | ۴٫۰ | ۳٫۵ | ۱۰٫۵ | ۴٫۰ | ۹٫۰ |
Free-Learn
جدول صفات تگ source در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| src | URL | برای مشخص کردن مسیر یا محل فایلی که قرار است اجرا شود. |
| srcset | URL | محل یا مسیر فایلی را که قرار است در حالت های مختلف صفحه نمایش اجرا شود را مشخص میکند. |
| media | media_query | برای مشخص کردن حالت های مختلف برای نمایش صفحه وب. (برای واکنش گرایی) |
| sizes | – | برای ایجاد تصاویر واکنش گرا – جهت نمایش در حالت های مختلف یک صفحه نمایش. |
| type | MIME-type | نوع محتوایی رسانه یا نوع رسانه را مشخص میکند. (مثلا نوع محتوایی فایل های ویدئویی از نوع mp4 میشه video/mp4) |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ source از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
تگ source یک تگ جدید در HTML5 می باشد.
نوع رسانه یا نوع محتوایی رسانه ای یا در واقع همون MIME-TYPE تمامی فایل ها را میتوانید از اینجا مشاهده نمایید.
Free-Learn
دستورات CSS پیش فرض
این تگ هیچ دستور CSS پیش فرضی ندارد.
