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

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

دسته بندی موضوعات
سفارش تبلیغات

مالتی مدیا در 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 آشنا شدید . امیدورام مفید واقع شده باشه .

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • hossein hassani

    ممنونم از آموزش خوبتون.

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟