جلسه ی بیست و سوم: Media در HTML

media در htmlدر جلسه ی قبلی تگ های اصلی که یک پست را تشکیل می دهند نام بردیم. (برای دیدن آموزش مورد نظر کلیک کنید) در این جلسه می خواهیم با تگ هایی تحت عنوان media هستند آشنا شویم.

انواع Media ها

Media یک تگ نیست و از چندین تگ تشکیل شده است که برای فراخوانی موسیقی، عکس و فیلم ساخته شده است. اما سوال اینجاست که برای فراخوانی این مباحث چه باید کرد؟؟ از چه تگ هایی باید استفاده نماییم؟؟؟ برای دریافت جواب این سوالات به ادامه ی اموزش توجه کنید.

 

 

تگ IMG

از تگ img برای قرار دادن یک عکس در نوشته ی خود استفاده می نماییم که خود یک Media است، در آموزش های قبلی به طور کامل نحوه ی استفاده از تگ img را آموزش داده ایم. (برای دیدن اموزش مورد نظر کلیک کنید)

تا اینجای کار با تگ img آشنا شده ایم که در آموزش های قبلی به توضیح این تگ پرداخته ایم. حال می خواهیم با تگ های جدید برای قرار دادن ویدئو و موسیقی در متن و نحوه ی کنترل آن ها آگاه شویم.

 

تگ Audio

تگ Audio یک تگ جدید در Html5 است که جزئی از Media ها می باشد . در گذشته برای قرار دادن یک فایل مانند موسیقی یا ویس یا دیگر فایل های صوتی از پلاگین های مختلف استفاده می کردند. امروزه در زبان HTML از تگ Audio استفاده می کنند.

از تگ Audio برای اضافه نمودن ویس و فایل های موسیقی به نوشته ی خود استفاده می نماییم. درون تگ Audio از تگ Source برای فراخوانی فایل های خود استفاده می کنیم.

 

تگ Source

از تگ Source برای فراخوانی فایل های صوتی و تصویری در تگ های مربوط به آن ها استفاده می نماییم. از مهم ترین ویژگی هایی که این تگ دارد می توان به ویژگی Src که برای گرفتن ادرس فایل مورد نظر از آن استفاده می شود می توان نام برد.

ویژگی دیگری که در این تگ وجود دارد ویژگی Type می باشد. ویژگی Type نوع فرمت فایل ما را تعیین می کند که این فرمت ها برای تگ Audio عبارتند از:

  1. برای فایل های Mp3: audio/mpeg
  2. برای فایل های Wav: audio/wav
  3. برای فایل های Ogg: audio/ogg

در حال حاضر برای فایل های صوتی سه فرمت بالا پشتیبانی می شود.

 

ادامه ی آموزش تگ Audio

تگ Audio نیز همانند دیگر تگ ها در زبان Html دارای ویژگی هایی می باشد که کارایی این تگ را بهتر و بیشتر نشان می دهد. پنج ویژگی این تگ عبارتند از:

ویژگی Autoplay: زمانی که از ویژگی Autoplay استفاده کنیم به محض آماده شدن فایل و آماده شدن صفحه ی سایت فایل صوتی ما شروع به پخش می کند.

ویژگی Controls: زمانی که از ویژگی Controls استفاده کنیم دکمه های فایل صوتی مانند میزان صدا یا اجرا/توقف و… در اختیار کاربر قرار می گیرد.

ویژگی Loop: زمانی که از ویژگی Loop استفاده کنیم پس از اتمام فایل دوباره فایل مورد نظر ما اجرا می شود و همینطور بدون توقف ادامه می یابد تا زمانی که خودمان دستور به توقف بدهیم.

ویژگی Preload: در صورتی که بخواهیم فایل صوتی مورد نظر ما در هنگام لود شدن صفحه شروع به اجرا نماید باید از ویژگی Preload استفاده کنیم.

ویژگی Muted: زمانی که از ویژگی Muted استفاده کنیم زمانی که فایل شروع به اجرا می نماید بی صدا می باشد.

تا الان به صورت کامل با تگ Audio آشنا شده اید حال به مثال زیر توجه کنید:

<audio controls muted autoplay loop>
 <source src="audio/song.mp3" type="audio/mpeg">
 مرور گر شما این فایل را پشتیبانی نمی کند.
</audio>

خروجی کد بالا:

تگ Audio

نکته: زمانی که مرورگر مورد نظر ما نتواند فایل صوتی را تشخیص دهد متنی که ما داخل تگ Audio قرار داده ایم به عنوان خروجی کد ما به کاربر نشان داده می دهد که مانند یک اخطار می باشد.

 

تگ Video

تگ Video یک تگ جدید در Html5 می باشد. از تگ Video برای فراخوانی فایل های تصویری خود استفاده می کنیم که جزئی از media ها می باشد. درون تگ Video همانند تگ Audio از تگ Source استفاده می کنیم.

همانطور که گفتیم مهم ترین ویژگی تگ Source ویژگی Src می باشد که لینک فایل مورد نظر ما را می گیرد و همچنین دارای ویژگی Type می باشد که نوع فرمت فایل مورد نظر ما را تعیین می کند که عبارتند از:

  1. برای فرمت MP4: video/mp4
  2. برای فرمت WebM: video/webm
  3. برای فرمت Ogg: video/ogg

تگ Video نیز مانند تگ Audio دارای ویژگی های مختص خود می باشد که این ویژگی ها عبارتند از:

ویژگی Autoplay: زمانی که از ویژگی Autoplay استفاده کنیم به محض آماده شدن فایل و آماده شدن صفحه ی سایت فایل تصویری ما شروع به پخش می کند.

ویژگی Controls: زمانی که از ویژگی Controls استفاده کنیم دکمه های فایل تصویری مانند میزان صدا یا اجرا/توقف و… در اختیار کاربر قرار می گیرد.

ویژگی Loop: زمانی که از ویژگی Loop استفاده کنیم پس از اتمام فایل دوباره فایل مورد نظر ما اجرا می شود و همینطور بدون توقف ادامه می یابد تا زمانی که خودمان دستور به توقف بدهیم.

ویژگی Preload: در صورتی که بخواهیم فایل صوتی مورد نظر ما در هنگام لود شدن صفحه شروع به اجرا نماید باید از ویژگی Preload استفاده کنیم.

ویژگی Muted: زمانی که از ویژگی Muted استفاده کنیم زمانی که فایل شروع به اجرا می نماید بی صدا می باشد.

ویژگی Width: زمانی که از ویژگی Width استفاده کنیم برای فایل تصویری خود یک عرض مشخص تعیین می کنیم.

ویژگی Height: زمانی که از ویژگی Height استفاده کنیم برای فایل تصویری خود یک ارتفاع مشخص تعیین می کنیم.

ویژگی Poster: زمانی که بخواهیم قبل از اجرای فیلم مورد نظر خود یک عکس بر روی صفحه نمایش داده شود از ویژگی Poster استفاده کنیم مقداری که این ویژگی می گیرد یک uRl می باشد.

حالا که با تگ Video آشنا شده ایم کافیست برای فهم بیشتر به مثال زیر توجه کنید:

<video controls poster="image/img.jpg" height="300px" width="500px">
  <source src="video/video.mp4" type="video/mp4">
  ویدئو مورد نظر برای مرورگر شما قابل پخش نمی باشد.
</video>

خروجی کد بالا:

تگ Video در Media

نکته: زمانی که مرورگر مورد نظر ما نتواند فایل تصویری را تشخیص دهد متنی که ما داخل تگ Video قرار داده ایم به عنوان خروجی کد ما به کاربر نشان داده می دهد که مانند یک اخطار می باشد.

 

خلاصه مطلب:

  1. از تگ img برای قرار دادن یک عکس در نوشته ی خود استفاده می نماییم.
  2. از تگ Audio برای اضافه نمودن ویس و فایل های موسیقی به نوشته ی خود استفاده می نماییم.
  3. از تگ Source برای فراخوانی فایل های صوتی و تصویری در تگ های مربوط به آن ها استفاده می نماییم.
  4. از تگ Video برای فراخوانی فایل های تصویری خود استفاده می کنیم.
  5. تگ های Video، Audio و img جزئی از media ها می باشند.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها