آموزش طراحی وب

مالتی مدیا در Html5

در این جلسه ، عناصر و خصوصیات جدید media در HTML5 به شما دوستان آموزش داده میشه .

مالتی مدیا در Html5

فصل چهارم ( معرفی HTML5 )

جلسه  ششم  (مالتی مدیا در Html5 )

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

در این جلسه ، عناصر و خصوصیات جدید media در HTML5 رو به شما دوستان آموزش میدم .

عنصر <audio> :

این عنصر در HTML4 هم پشتیبانی میشه که از دو فرمت mp3 و  ogg استفاده می کنه . تو مرورگرهای Internet Explorer, Chrome, Firefox 21+, and Safari فرمت mp3  اجرا میشه و تو firefox های قدیمی و opera فرمت ogg  اجرا میشه و اگر هیچ کدوم پشتیبانی نشوند متنی نمایش داده میشه که بیان گر اینه که مرورگر شما این فرمت رو پشتیبانی نمیکنه ؛ برای تعیین متن دلخواه شما میتونید در ساختار زیر متن  Your browser does not support the audio element رو تغییر بدید . این عنصر فرمت های MP3, Wav, Ogg رو پشتیبانی میکنه . برای نمایش ادرس صوت ها از عنصر <source> استفاده می کنیم .

ساختار کلی :

 جدول زیر پشتیبانی مرورگرهای مختلف از این عنصر و فرمت فایل ها رو نمایش میده :

Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox NO
Update: Firefox 21 running on Windows 7, Windows 8,
Windows Vista, and Android now supports MP3
YES YES
Safari YES YES NO
Opera NO YES YES

خاصیت های عنصر <audio> :

Controls : میشه گفت این خاصیت ، باید در این عنصر بصورت پیشفرض باشه ، که دکمه های pause و  play رو نمایش میده .  در صورتی که این خاصیت در عنصر نباشه ، عنصر نمایش داده نمیشه مگر اینکه Autoplay باشه.

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

 Loop :  اگر از این خاصیت استفاده کنید ، با زدن دکمه play ، صوت چندین و چند بار بصورت مکرر اجرا میشه تا زمانی که دوباره pause کنید .

 Mute : در صورتی که از این خاصیت استفاده کنید ، پخش کننده بصورت پیشفرض بی صدا اجرا میشه تا زمانی که پخش کننده رو از حالت mute خارج کنید :

 Src : علاوه بر اینکه میتونید برای خواندن url فایل های صوتی از عنصر source استفاده کنید ، میتونید از خاصیت src در عنصر اصلی audio نیز استفاده کنید . اما برای اینکه اطمینان داشته باشید ، کد شما تو همه ی مرورگرها اجرا میشه بهتره که از همون عنصر source استفاده کنید .

 همچنین این خاصیت در عنصر source هم استفاده میشه :

 

عنصر video :

این عنصر در HTML5 پا به دنیای HTML گذاشت . توسط این عنصر میتونید خیلی راحت ویدئوهای خودتون رو بصورت آنلاین پخش کنید . از سه نوع فایل ویدئویی پشتیبانی می کنه : webM , mp4 , ogg

ساختار کلی :

جدول زیر پشتیبانی مرورگرهای مختلف از این عنصر و فرمت فایل ها رو نمایش میده :

Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox NO
Update: Firefox 21 running on Windows 7, Windows 8,
Windows Vista, and Android now supports MP4
YES YES
Safari YES NO NO
Opera NO YES YES

خاصیت های عنصر  <video> :

این عنصر تمامی خاصیت های <audio> (autoplay , controls , loop , muted , src ) رو داره ، علاوه بر خاصیت هایی که برای عنصر audio توضیح دادم ، سه خاصیت دیگه هم داره که بهتون معرفی میکنم :

 Poster : با استفاده از خاصیت poster ، میتونید یه کاور برای ویدئوتون قرار بدید ، این کاور تا زمانی که ویدئو رو play کنید ، نمایش داده میشه ، پس از اینکه ویدئو رو play کنید ، این کاور پنهان میشه .

 Width : با این خاصیت عرض کادر ویدئو رو مشخص می کنید .

Height : با این خاصیت ارتفاع کادر ویدئو رو مشخص می کنید .

نکته : برای استاندارد سازی پروژتون همیشه عرض و طول رو در عنصر video اعمال کنید و به گونه ای باهم هماهنگ کنید که ویدئو به درستی نمایش داده بشه و شامل فضای خالی نشه . به تصویر زیر دقت کنید ، به دلیل تعیین طول و عرض ناهماهنگ ، فضای خالی در حاشیه ی کادر ویدئو بوجود اومده.

video

عنصر <track> :

در ابتدا بذارید از مرورگرهایی که این عنصر رو پشتیبانی می کنند بگم ، تنها مرورگرهایی که این عنصر رو پشتیبانی می کنند opera , chrome , internet explorer 10  هستند که این باعث شده ، محبوبیت چندانی پیدا نکنه و در بین کاربران کارآمد نباشه ، پس ما هم روی این عنصر تمرکز نمیکنیم . فقط برای کسانی که میخوان این عنصر رو بشناسن باید بگم که اگر شما بخواین برای ویدئو و یا صوتتون یک caption یا subtitle در نظر بگیرید ، میتونید از این عنصر استفاده کنید :

ساختار کلی :

 

خاصیت های عنصر <track>:

Kind : این خاصیت نوع این عنصر رو مشخص می کنه . که شامل مقادیر زیر میشه :

captions
chapters
descriptions
metadata
subtitles

label : با این خاصیت یک نام برای متن track مشخص می کنید .

Src : با این خاصیت آدرس فایل  track رو مشخص می کنید .

Srclang : زمانی که از عنصر track برای  subtitleاستفاده می کنید ، با این خاصیت زبان track رو مشخص می کنید .

خوب این جلسه هم تموم شد و با عناصر مالتی مدیا در HTML5 آشنا شدید . امیدورام مفید واقع شده باشه .

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

۱ دیدگاه

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین