حسین همت یار
فصل چهارم ( معرفی 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> استفاده می کنیم .
ساختار کلی :
|
۱ ۲ ۳ ۴ ۵ |
<audio controls> <source src="http://www.iranweblearn.com/download/voice/iroschool.ogg" type="audio/ogg"> <source src="http://www.iranweblearn.com/download/voice/iroschool.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> |
جدول زیر پشتیبانی مرورگرهای مختلف از این عنصر و فرمت فایل ها رو نمایش میده :
| 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 باشه.
|
۱ ۲ ۳ ۴ ۵ |
<audio controls> <source src=" http://www.iranweblearn.com/download/voice/iroschool.ogg" type="audio/ogg"> <source src=" http://www.iranweblearn.com/download/voice/iroschool.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> |
Autoplay : با انتخاب این خاصیت ، این قابلیت رو برای عنصر فراهم می کنید که بصورت خودکار پس از بارگزاری صفحه ، اجرا بشه .
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ |
<audio controls autoplay> <source src="http://www.iranweblearn.com/download/voice/iroschool.ogg" type="audio/ogg"> <source src="http://www.iranweblearn.com/download/voice/iroschool.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> |
Loop : اگر از این خاصیت استفاده کنید ، با زدن دکمه play ، صوت چندین و چند بار بصورت مکرر اجرا میشه تا زمانی که دوباره pause کنید .
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ |
<audio controls loop> <source src="http://www.iranweblearn.com/download/voice/iroschool.ogg" type="audio/ogg"> <source src="http://www.iranweblearn.com/download/voice/iroschool.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> |
Mute : در صورتی که از این خاصیت استفاده کنید ، پخش کننده بصورت پیشفرض بی صدا اجرا میشه تا زمانی که پخش کننده رو از حالت mute خارج کنید :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ |
<audio controls muted> <source src="http://www.iranweblearn.com/download/voice/iroschool.ogg" type="audio/ogg"> <source src="http://www.iranweblearn.com/download/voice/iroschool.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> |
Src : علاوه بر اینکه میتونید برای خواندن url فایل های صوتی از عنصر source استفاده کنید ، میتونید از خاصیت src در عنصر اصلی audio نیز استفاده کنید . اما برای اینکه اطمینان داشته باشید ، کد شما تو همه ی مرورگرها اجرا میشه بهتره که از همون عنصر source استفاده کنید .
|
۱ ۲ ۳ |
<audio src="http://www.iranweblearn.com/download/voice/iroschool.ogg" controls> Your browser does not support the audio element. </audio> |
همچنین این خاصیت در عنصر source هم استفاده میشه :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ |
<audio controls> <source src="http://www.iranweblearn.com/download/voice/iroschool.ogg" type="audio/ogg"> <source src="http://www.iranweblearn.com/download/voice/iroschool.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> |
عنصر video :
این عنصر در HTML5 پا به دنیای HTML گذاشت . توسط این عنصر میتونید خیلی راحت ویدئوهای خودتون رو بصورت آنلاین پخش کنید . از سه نوع فایل ویدئویی پشتیبانی می کنه : webM , mp4 , ogg
ساختار کلی :
|
۱ ۲ ۳ ۴ ۵ |
<video controls poster="/images/w3html5.gif"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> |
| 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 کنید ، این کاور پنهان میشه .
|
۱ ۲ ۳ ۴ ۵ |
<video controls poster="cover.gif"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> |
Width : با این خاصیت عرض کادر ویدئو رو مشخص می کنید .
Height : با این خاصیت ارتفاع کادر ویدئو رو مشخص می کنید .
نکته : برای استاندارد سازی پروژتون همیشه عرض و طول رو در عنصر video اعمال کنید و به گونه ای باهم هماهنگ کنید که ویدئو به درستی نمایش داده بشه و شامل فضای خالی نشه . به تصویر زیر دقت کنید ، به دلیل تعیین طول و عرض ناهماهنگ ، فضای خالی در حاشیه ی کادر ویدئو بوجود اومده.
عنصر <track> :
در ابتدا بذارید از مرورگرهایی که این عنصر رو پشتیبانی می کنند بگم ، تنها مرورگرهایی که این عنصر رو پشتیبانی می کنند opera , chrome , internet explorer 10 هستند که این باعث شده ، محبوبیت چندانی پیدا نکنه و در بین کاربران کارآمد نباشه ، پس ما هم روی این عنصر تمرکز نمیکنیم . فقط برای کسانی که میخوان این عنصر رو بشناسن باید بگم که اگر شما بخواین برای ویدئو و یا صوتتون یک caption یا subtitle در نظر بگیرید ، میتونید از این عنصر استفاده کنید :
ساختار کلی :
|
۱ ۲ ۳ ۴ ۵ ۶ |
<video width="۳۲۰" height="۲۴۰" controls> <source src="forrest_gump.mp4" type="video/mp4"> <source src="forrest_gump.ogg" type="video/ogg"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> </video> |
خاصیت های عنصر <track>:
Kind : این خاصیت نوع این عنصر رو مشخص می کنه . که شامل مقادیر زیر میشه :
captions
chapters
descriptions
metadata
subtitles
label : با این خاصیت یک نام برای متن track مشخص می کنید .
Src : با این خاصیت آدرس فایل track رو مشخص می کنید .
Srclang : زمانی که از عنصر track برای subtitleاستفاده می کنید ، با این خاصیت زبان track رو مشخص می کنید .
خوب این جلسه هم تموم شد و با عناصر مالتی مدیا در HTML5 آشنا شدید . امیدورام مفید واقع شده باشه .
تهیه شده در مدرسه مجازی ایرانیان
ممنونم از آموزش خوبتون.