عناصر تصویر و مدیا html

عناصر تصویر و مدیا در html

عناصر تصویر و مدیا عناصری هستند که اجازه می دهند، فرمت های زیادی شامل تقریبا هر چیزی که می شنوید یا می بینید، مانند تصویر، صوت و ویدئوها را در سند html خود قرار داده و در مروگر آن ها را به نمایش در آورید. این عناصر پسوند های مختلفی از جمله swf، .wmv، .mp3. و mp4. را میتوانند داشته باشند.

آنچه در این مقاله می خوانید ...

 

تگ های تصویر و مدیا html

برای تصاویر تگ هایی مانند <img> و <picture> می توان استفاده نمود. اکثر پسوند های تصاویر در مرورگرها توسط این تگ ها پشتیبانی می شوند

در زیر طریقه استفاده از عناصر استاندارد مدیا در html را مشاهده می نمایید:


فرمت های ویدئو قابل استفاده در html5 :
MP4, WebM and Ogg
و فرمت های استاندارد فایل های صوتی:
MP3, WAV and Ogg
می باشند.

<audio controls>
<source src=”horse.ogg” type=”audio/ogg”>
<source src=”horse.mp3″ type=”audio/mpeg”>
Your browser doesn’t support audio tag.
</audio>
<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser doesn’t support video tag.
</video>


مـــهم از فرمت های بالا برای ویدئو MP4 و برای موسیقی MP3 پیشنهاد می شود.

مـــهم همچنین می توانید با استفاده از تگ <iframe> ویدئو های دیگر سایت ها مانند سایت Youtube را در سایت خود نمایش دهید.

 

تگ <embed> در html

ساده ترین راه برای افزودن صدا یا ویدئو به وب سایت استفاده از تگ <embed> در html می باشد. این تگ باعث می شود که مرورگر به طور خودکار کنترل هایی را برای مدیا در نظر بگیرد و نوع مدیای ارائه شده را پشتیبانی کند. برخی از مرورگر ها ممکن است تگ <embed> را نشناسند برای این موارد از تگ <noembed> استفاده می کنیم و به مرورگری که از آن تگ پشتیبانی نمی کند گفته می شود به جای آن مدیا چه چیزی را به کاربران نمایش دهد.

 

تگ <object> در html

تگ <object> یک شی را در سند html جاسازی می کند. یا به عبارت ذیگر از تگ Object برای ارتباط بین اشیاء خارجی مثل فایل صوتی یا تصویری به صفحه html استفاده می شود. همچنین این تگ امکان ایجاد تغییر در اطلاعات را به برنامه نویس می دهد.

متن موجود بین دو تگ باز و بسته object متنی جایگزین برای مرورگر هایی می باشد، که از این تگ پشتیبانی نمی کنند.

توجه برخی از ویژگی های تگ object در html5 منسوخ شده اند.

همچنین بخوانید...!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *