آموزش چند رسانه ای در html

  • دسته بندی : آموزش - آموزش html
  • ۱ نظر
  • تاریخ بروزرسانی : ۲۵ دی ۱۳۹۹
  • 364 بازدید

آموزش چند رسانه ای در html

آموزش 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>

 

در این مثال ۳ تصویر برای سایزهای مختلف انتخاب ‌شده است که با تغییر سایز صفحه این تصاویر نیز تغییر می‌کنند و جایگزین تصاویر در دیگر سایز‌ها می‌شوند. توضیح این کد به شرح زیر است:

  1. در سایز‌های بزرگتر یا برابر ۶۵۰ پیکسل یک تصویر با درختانی با شکوفه‌ها و گل‌های صورتی رنگ مشاهده می‌کنید.
  2. درسایز‌های کمتر از ۶۵۰ پیکسل و بزرگتر یا برابر ۴۶۵ پیکسل تصویر گل سفید رنگ را مشاهده می‌کنید.
  3. در سایز‌های کمتر از ۴۶۵ پیکسل نیز شما تصویر Clip Art گل نارنجی رنگ را مشاهده می‌کنید.

پس نتیجه ای که پس از اجرا شدن این کد مشاهده میکنید به این صورت خواهد بود ، با تغییر ساز صفحه نمایش عکس نیز تغییر میکند.

چند رسانه ای در html

نکات:

  • از تگ داخلی 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 را با آخرین نسخه های ارائه شده از آنها با زبانی گویا بیان کرده است که میتواند مقدمه ای عالی برای شروع باشد. خب عزیزان خسته نباشید. اگر سوالی ندارید جلسه امروز ما به پایان رسید؛ خسته نباشید.

به این مطلب امتیاز دهید

امتیاز کلی : 0 / 5. تعداد آرا : 0

اولین نفر باید که به این مطلب امتیاز میدهید

وبیت این پست توسط نگارش شده است.

اسم من محمد پورداداش هست و متولد سال 1367 در خدمت شما هستیم . تخصص من طراحی گرافیک و کدنویسی وب است و سعی خواهم کرد بهترین خدمات را به شما وبمستران و گرافیست های عزیز ارائه کنم. به ترس هات غلبه کن تا در زندگی همیشه پیروز باشی.

در کانال وبیت عضو شو تا از آخرین اخبار ، آپدیت محصولات و تخفیف ها با خبر بشی ☺ عضویت در کانال تلگرام

اشترک گذاری

مقاله های پیشنهادی

وبیت این مطالب را به شما پیشنهاد میدهد

ارسال نظر ( 1 نظر تایید )

نظرات پس از رویت و تایید مدیران نمایش داده می شود

  • سعید 29 دی 1399 پاسخ

    عالیییی بود ممنون از سایت خوبتون.

مشاهده نظرات بیشتر

همکاران وبیت