برای استعلام یا ارسال سفارش اینجا کلیک کنید.

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

image_b239dd72dc7a31401b3ab57c805ad11c7ed6d15b-min آموزش چند رسانه ای در 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 گل نارنجی رنگ را مشاهده می‌کنید.

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

2112-min-1024x954 آموزش چند رسانه ای در 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 پشتیبانی خواهند کرد را نام میبرم:
نام مرورگرMP4WebMOgg
Internet Exploreryesnono
Chromeyesyesyes
Firefoxyesyesyes
Safariyesnono
Operayesyesyes
  • در ادامه هم type مهم ترین فرمت های ویدئو را برایتان نام میبرم
فرمت فایلType
MP4video/mp4
WebMvideo/webm
Oggvideo/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 را داشته باشد در غیراینصورت فایل شما برای کاربر پخش نخواهد شد.

به جدول های زیر دقت کنید:

  • پشتیبانی مرورگرها از سه فرمت فایل های صوتی
نام مرورگرMP3WavOgg
Internet Exploreryesnono
Chromeyesyesyes
Firefoxyesyesyes
Safariyesyesno
Operayesyesyes

 

نوع رسانه(Type) صوتی در HTML

فرمت فایلType
MP3audio/mpeg
WAVaudio/wav
Oggaudio/ogg

 

کلام آخر:

خب دانشجویان عزیز به پایان کلاس رسیدیم. من سعی کردم در این جلسه ،چند رسانه­ای­ها در html را به شما توضیح دهم اما این مطالب شروعی ابتدایی برای حرفه ای شدن است .چرا که شما بعد از آن باید به سراغ CSS و آموزش بوت استرپ بروید.

بوت استرپ هم یک فریم ورک برای html css است که کار کدنویسی را برای شما آسان تر میکند. اما چرا باید از این فریم ورک استفاده کنیم؟ تا سایت ما در گوشی های هوشمند به صورت ریسپانسیو نشان داده شود.

در پایان هم به معرفی یک منبع برای یادگیری میپردازم.

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

همانطور که میدانید سایت و منابع بسیاری در فضای اینترنت وجود دارد که میتوانید از آن استفاده کنید اما سایت درسمن مفاهیم html، CSS و Bootstrap را با آخرین نسخه های ارائه شده از آنها با زبانی گویا بیان کرده است که میتواند مقدمه ای عالی برای شروع باشد. خب عزیزان خسته نباشید. اگر سوالی ندارید جلسه امروز ما به پایان رسید؛ خسته نباشید.

هاست و دامنه ندارید!؟ سفارش دهید
من محمد پورداداش متولد سال ۱۳۶۷ در خدمت شما هستم. طراحی گرافیک و وب مهمترین مسئولیت من بوده و است. سعی خواهم کرد بهتر از همیشه در خدمت شما باشم. خوب بودن به حرف نیست به رفتار نیک و عمل پسندیده است.
در کانال ما عضو شوید و از آخرین اخبار ، محصولات و تخفیف با خبر شوید... کانال تلگرام وبیت

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

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده اید و با آن موافق هستید.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

سعید گفته :کاربر سایت
1399-10-29 14:35پاسخ دهید

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

آخرین نمونه کار ها مشاهده همه

آخرین طرح های اختصاصی اجرا شده