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

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

تا به حال، استانداردی برای نمایش ویدئو / فیلم در یک صفحه وب وجود نداشته است.
امروزه، اکثر فیلم ها از طریق یک پلاگین (مانند فلش) نشان داده می شود. با این حال، مرورگرهای مختلف ممکن است پلاگین های متفاوت داشته باشند.
HTML5 یک عنصر جدید را تعریف می کند که یک روش استاندارد را برای جاسازی ویدیو / فیلم در یک صفحه وب مشخص می کند. عنصر <video> .

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

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

پشتیبانی مرورگر

اینترنت اکسپلورر ۹، فایرفاکس، اپرا، کروم، و سافاری از عنصر <video> پشتیبانی می کنند.
توجه: مرورگر اینترنت اکسپلورر ۸ و نسخه های قبلی، عنصر <video> را پشتیبانی نمی کنند.

ویدئو HTML5 چگونه کار می کند؟

برای نشان دادن یک ویدئو در HTML5، این همه چیزی است که نیاز دارید :

این عنصر در 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 توضیح دادم ، سه خاصیت دیگه هم داره که بهتون معرفی میکنم :

تمام خصوصیت های تگ <video>

audio: حالت پیش فرض صدا را تعریف می کند. در حال حاضر فقط یک مقدا می تواند بگیرد: muted

autoplay: در صورتی که وجود داشته باشد ویدئو به محض اینکه آماده شود خود به خود پخش می شود و مقداری که می تواند بگیرد: autoplay

controls: در صورت وجود دکمه های کنترلی توضیح داده شده در بالا نمایش داده می شود. مقدار: controls

Height: ارتفاع پخش کننده ویدئو را تنظیم می کند. مقدار: عددی بر حسب pixel

loop: در صورت وجود پس از اتمام نمایش ویدئو پخش آن دوباره شروع می شود. مقدار:loop

poster: مشخص کننده تصویری است که به عنوان پیش نمایش ویدئو از آن استفاده می کند. مقدار آن یک url یا آدرس اینترنتی است.

preload: در صورت وجود ویدئو در زمان لود صفحه، لود شده و آماده اجرا می شود. اگر autoplay وجود داشته باشد این خاصیت نادیده گرفته می شود.

src: آدرس ویدئویی که باید پخش شود. مقدار آن یک url یا آدرس اینترنتی است.

width: پهنای پخش کننده ویدئو را تنشیم می کند. مقدار: عددی بر حسب pixel


در مثال زیر، به روشی ساده چگونگی آدرس دهی یک عنصر <video>، خواندن و تنظیم خصوصیت ها و صدا زدن متدها توضیح داده شده است.

  • MP4 = فایل های MPEG 4 با کدک ویدئویی H264 و کدک صوتی AAC
  • MP4 = فایل های MPEG 4 با کدک ویدئویی H264 و کدک صوتی AAC
  • Ogg = فایلهای Ogg با کدک ویدئویی Theora و کدک صوتی Vorbis

انواع MIME برای فرمت های ویدیویی

فرمت MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

روش ها و خصوصیات DOM

HTML5 برای عناصر <video> و <audio> متد ، خصوصیات و حوادث DOM دارد. این متد ها ، خصوصیات ، و حوادث به شما اجازه دستکاری عناصر <video> و <audio> با استفاده از جاوا اسکریپت را می دهد.
به عنوان مثال متد هایی برای اجرا کردن ، توقف و بارگیری ، و خصوصیاتی (مانند مدت زمان و حجم صدا) وجود دارد.
همچنین رویدادهای DOM نیز وجود دارد که می تواند به شما هنگامی که عنصر <video> شروع به اجرا می کند و یا متوقف می شود یا پایان می یابد و … اطلاع دهد.

عنصر <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 : میشه گفت این خاصیت ، باید در این عنصر بصورت پیشفرض باشه ، که دکمه های pause و  play رو نمایش میده .  در صورتی که این خاصیت در عنصر نباشه ، عنصر نمایش داده نمیشه مگر اینکه Autoplay باشه.

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

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

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

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

عنصر <track> :

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

برچسب ها ویدئوی HTML5

برچسب توضیحات
<video> یک ویدئو یا فیلم تعریف می کند
<source> منابع رسانه ای چندگانه برای عناصر رسانه ای مانند <video> و <audio> تعریف می کند
<track> آهنگ متن را در مدیاپلیرها تعریف می کند

 

آموزش HTML

دیدگاه خود را بیان کنید