آموزش چند رسانه ای در html
- آموزش • آموزش html
- ۱۳ اسفند ۱۴۰۱
- 1,996 بازدید
آنچه در این پست می‌خوانید
آموزش html و css
در جلسه امروز آموزش html css میخواهم درباره چند رسانه ای ها در html صحبت کنم.
چند رسانه ای ها مقابل برنامه های صرفا متنی قرار دارند یعنی استفاده از عکس، صوت، ویدئو و …. که در حال حاضر با وجود نسخه html5 شاهد تحول عظیمی در نحوه نمایش چند رسانه ای ها در دنیای وب شده ایم؛ اما به چه صورت؟
شما با استفاده از یک قطعه کد که در ادامه به معرفی آنها میپردازیم، میتوانید هر کجای صفحات وب که بخواهید از آنها استفاده کنید.
پس تا اینجا فهمیدیم که چند رسانهایها چه هستند. اما اینکه چگونه از آنها در کدهای html استفاده کنیم، بحث امروز ماست.
آموزش اولین تگ چند رسانه ای در html:
نام این تگ picture است و یکی از رایج ترین تگ های html در دیزاین وبسایت ها برای طراحی واکنش گراست و به عنوان یک قالب برای نگهداری چندین عکس در حالتهای مختلف یک صفحه وب به کار میرود و دارای دو تگ داخلی به نامهای source و image است.
صفتهای تگ داخلی source:
- Srcset: این صفت تعیین کننده آدرس تصویر برای نمایش است.
- Media: حداقل min عکس را در سایزهای مختلف صفحه نمایش نشان میدهد.
- Type: با این صفت به اینترنت کمک میکنیم که نوع فایل ما را تشخیص دهد، یعنی کامپیوتر ها و سیستم عامل ها از پسوند فایل ها برای تشخیص استفاده میکنند ولی مرورگرها از MIME-Typeها برای اینکار استفاده میکنند.
به مثال زیر توجه کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>کار با تصویر</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>
در این مثال ۳ تصویر برای سایزهای مختلف انتخاب شده است که با تغییر سایز صفحه این تصاویر نیز تغییر میکنند و جایگزین تصاویر در دیگر سایز‌ها میشوند. توضیح این کد به شرح زیر است:
- در سایزهای بزرگتر یا برابر ۶۵۰ پیکسل یک تصویر با درختانی با شکوفه‌ها و گل‌های صورتی رنگ مشاهده میکنید.
- درسایز‌های کمتر از ۶۵۰ پیکسل و بزرگتر یا برابر ۴۶۵ پیکسل تصویر گل سفید رنگ را مشاهده میکنید.
- در سایزهای کمتر از ۴۶۵ پیکسل نیز شما تصویر Clip Art گل نارنجی رنگ را مشاهده میکنید.
پس نتیجه ای که پس از اجرا شدن این کد مشاهده میکنید به این صورت خواهد بود ، با تغییر ساز صفحه نمایش عکس نیز تغییر میکند.
نکات:
- از تگ داخلی image تنها یکبار در تگ picture میتوانید استفاده کنید آن هم برای زمانی که سایز عکس توسط شما مشخص نشده است. اما برای استفاده از تگ داخلی source محدودیتی ندارید.
- اولویت نمایش تصاویر در تگ picture با تگ source درون آن نمایش داده میشوند پس دقت کنید که سایزهای بزرگتر برای نمایش را در اولیویت اولیه قرار دهید و اولویت آخرهم با تگ img است.
- پشتیبانی مرورگرها از این تگ که عبارت اند از : Chrome، Firefox، Opera، Safari، IE
معرفی دومین تگ چند رسانه ای با نام video:
برای قرار دادن ویدئو در html باید از تگ < video> استفاده کنید که دارای یک تگ داخلی به نام source است. این تگ دارای دو صفت به نام های src(تعیین کننده آدرس ویدئو) و type(مانند تگ type در picture عمل میکند) می باشد.
صفتهای تگ video:
- Controls: مهمترین صفت که برای نمایش دکمه پخش ویدئو استفاده میشود.
- Poster: میتوانید با این صفت یک تصویر شاخص برای ویدئو خود انتخاب کنید.
- Width و height: برای تنظیم عرض و ارتفاع ویدئو خود باید از این صفت استفاده کنید.
- Preload: این صفت، ویدئو شما را به صورت خودکار در زمان لود صفحه پخش میکند و ممکن است مطابق میل کاربر نباشد.
تعریف ساختار کلی تگ video:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>کار با ویدئو </title> </head> <body> <video controls width="854" height="480" poster=" آدرس تصویر شاخص برای ویدئو " preload="auto"> <source src="آدرس ویدئو " type="audio/ogg"/> <source src="آدرس ویدئو " type="audio/ogg"/> <span>مرورگر شما این ویدئو را پشتیبانی نمی کند</span> </video> </body> </html>
توضیح کد بالا:
کد بالا ساختار کلی یک تگ ویدئو برای استفاده را نشان میدهد. شما در پایان این تگ میتوانید یک پیغام به کاربر نشان دهیم تا اگر مرورگر کاربر از تگ <video> پشتیبانی نکرد آن پیغام نمایش داده شود و کاربر بداند که دلیل پخش نشدن ویدئو چه بوده است.
شما برای مشخص کردن نوع فایل خود در قسمت type نیازی به حفظ کردن آن ها برای استفاده نیستید و کافی است در اینترنت سرچ کنید تا لیستی از MIME-Type ها در اختیار شما قرار بگیرد.
نکات:
- فرمت های ویدئویی که توسط html5 پشتیبانی میشوند عبارت است از:MP4 و WebM و Ogg . پس فایل ویدئویی شما باید از این فرمت ها ایجاد شده باشد.
- تنها فرمتی که توسط تمامی مرورگرها پشتیبانی می شود فرمت MP4 می باشد و در ادامه مرورگرهایی که از سه فرمت MP4 و WebM و Ogg پشتیبانی خواهند کرد را نام میبرم:
| نام مرورگر | MP4 | WebM | Ogg |
| Internet Explorer | yes | no | no |
| Chrome | yes | yes | yes |
| Firefox | yes | yes | yes |
| Safari | yes | no | no |
| Opera | yes | yes | yes |
- در ادامه هم type مهم ترین فرمت های ویدئو را برایتان نام میبرم
| فرمت فایل | Type |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
آخرین تگ در لیست چند رسانه ای ها:
اخرین تگی که میخواهم درباره آن صحبت کنم تگ <audio> است. شما با استفاده از این تگ می توانید در صفحه وب سایت خود صوت قرار دهید.
نحوه قرار دادن فایل های صوتی در HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>کار با صوت </title> </head> <body> <audio controls> <source src="آدرس صوت " type="audio/mp3"/> <span> شرمنده،مرورگر شما از تگ صدا پشتیبانی نمی کند </span> </audio> </body> </html>
این تگ دارای دو صفت src و typeاست و از فرمتهایی نظیر MP3 و WAV و Ogg در HTML5 پشتیبانی میکند، پس شما برای قرار دادن یک آهنگ و.. درون یک صفحه وب، فایل باید یکی از ۳ فرمت MP3 و WAV و Ogg را داشته باشد در غیراینصورت فایل شما برای کاربر پخش نخواهد شد.
به جدول های زیر دقت کنید:
- پشتیبانی مرورگرها از سه فرمت فایل های صوتی
| نام مرورگر | MP3 | Wav | Ogg |
| Internet Explorer | yes | no | no |
| Chrome | yes | yes | yes |
| Firefox | yes | yes | yes |
| Safari | yes | yes | no |
| Opera | yes | yes | yes |
نوع رسانه(Type) صوتی در HTML
| فرمت فایل | Type |
| MP3 | audio/mpeg |
| WAV | audio/wav |
| Ogg | audio/ogg |
کلام آخر:
خب دانشجویان عزیز به پایان کلاس رسیدیم. من سعی کردم در این جلسه ،چند رسانهایها در html را به شما توضیح دهم اما این مطالب شروعی ابتدایی برای حرفه ای شدن است .چرا که شما بعد از آن باید به سراغ CSS و آموزش بوت استرپ بروید.
بوت استرپ هم یک فریم ورک برای html css است که کار کدنویسی را برای شما آسان تر میکند. اما چرا باید از این فریم ورک استفاده کنیم؟ تا سایت ما در گوشی های هوشمند به صورت ریسپانسیو نشان داده شود.
در پایان هم به معرفی یک منبع برای یادگیری میپردازم.
همانطور که میدانید سایت و منابع بسیاری در فضای اینترنت وجود دارد که میتوانید از آن استفاده کنید اما سایت درسمن مفاهیم html، CSS و Bootstrap را با آخرین نسخه های ارائه شده از آنها با زبانی گویا بیان کرده است که میتواند مقدمه ای عالی برای شروع باشد. خب عزیزان خسته نباشید. اگر سوالی ندارید جلسه امروز ما به پایان رسید؛ خسته نباشید.
