تبلیغات
یادداشت های من - آموزش HTML5 – جلسه سوم: Video ویدئو در HTML5

یادداشت های روزانه من درباره اینترنت، سیاست، آبکنار، رایانه، شعر، فناوری اطلاعات و ...
هر چیزی که بهش علاقه دارم

حسین (کیوان) جهانبخش آبکنار

جستجو

 

آموزش HTML5 – جلسه سوم: Video ویدئو در HTML5

دوشنبه 2 خرداد 1390   10:58 ب.ظ

وب سایت های جدید اکثراً از ویدیو در محتوای خود استفاده می کنند. HTML5 استانداردی را برای نمایش آن ها فراهم کرده است.


ویدیو بر روی وب:

تا به حال، هرگز استانداردی برای نمایش ویدیو در صفحات وب وحود نداشته است. امروزه، ویدیوو ها عموماً از طریق یک پلاگین مثل فلش نشان داده میشوند. هر  چند همه مرورگرها پلاگین های مشابهی ندارند.

HTML5 روش استانداردی را برای نمایش ویدیو با استفاده از عنصر (تگ) ویدیو فراهم کرده است.

فرمت های ویدیویی

در حال حاضر 3 فرمت توسط تگ ویدیو پشتیبانی میشود:

  • Ogg: فایل های Ogg با کدک تصویری Theora و کدک صوتی Vorbis

پشتیبانی می شود در:

Firefox 3.5+ (نسخه های بالاتر از 3.5 فایرفاکس)

Opera 10.5+

Chrome 5.0+

پشتیبانی نمی شود در:

InternetExplorer

Safari

 

  • MPEG 4: فایل های MPEG 4 با کدک تصویری H.264 و کدک صوتی AAC

پشتیبانی می شود در:

IE 9.0+

Chrome 5.0+

پشتیبانی نمی شود در:

Firefox

Opera

Safari

 

  • WebM: فایل های WebM با کدک تصویری VP8 و کدک صوتی Vorbis

پشتیبانی می شود در:

Firefox 4.0+

Opera 10.6+

Chrome 6.0+

پشتیبانی نمی شود در:

IE

Safari

 

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

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

<video src="movie.ogg" controls="controls">
</video>

ویژگی controls برای افزودن کنترل های play، pause و صصداست. ضمناً بهتر است از خصوصیت های width و height هم همیشه استفاده کنید.

بین دو تگ <video> و </video> چیزی را که می خواهید در صورتی که مرورگر از عنصر ویدیو پشتیبانی نمی کند به کاربر نشان داده شود می نویسید. مثلاً:

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

مثال بالا از یک فایل Ogg استفاده کرده ایت و در مرورگرهای فایرفاکس و اوپرا و کروم کار می کند. بای اینکه ویدیو در اینترنت اکسپلورر و سافاری و نسخه های قبلی کروم بتوانید ویدیو را نشان دهید باید از فابل های WebM و MPEG 4 استفاده کنید.

تگ ویدیو به شما اجازه می دهد که چند تگ source داشته باشید. تگ های source می تواند به فایل های ویدیویی مختلف وصل باشد. مرورگر اولین فرمتی که قابلیت نمایش آن را داشته باشد همان را به کاربر نشان می دهد.

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>


تمام خواص (ویژگی ها یا Attribute) تگ <video>

  • audio: حالت پیش فرض صدا را تعریف می کند. در حال حاضر فقط یک مقدا می تواند بگیرد: muted
  • autoplay: در صورتی که وجود داشته باشد ویدیو به محض اینکه آماده شود خود به خود پخش می شود و مقداری که می تواند بگیرد: autoplay
  • controls: در صورت وجود دکمه های کنترلی توضیح داده شده در بالا نمایش داده می شود. مقدار: controls
  • Height: ارتفاع پخش کننده ویدیو را تنظیم می کند. مقدار: عددی بر حسب pixel
  • loop: در صورت وجود پس از اتمام نمایش ویدیو پخش آندوباره شروع می شود. مقدار:loop
  • poster: مشخص کننده تصویری است که به عنوان پیش نمایش ویدیو از آن استفاده می کند. مقدار آن یک url یا آدرس اینترنتی است.
  • preload: در صورت وجود ویدیو در زمان لود صفحه، لود شده و آماده اجرا می شود. اگر autoplay وجود داشته باشد این خاصیت نادیده گرفته می شود.
  • src: آدرس ویدیویی که باید پخش شود. مقدار آن یک url یا آدرس اینترنتی است.
  • width: پهنای پخش کننده ویدیو را تنشیم می کند. مقدار: عددی بر حسب pixel


پ ن : این مجموعه آموزش ها از سایت W3C ترجمه شده و خواهد شد. جهت آشنایی خودم و دیگران منتشر می کنم.


نوشته شده توسط : حسین (کیوان) جهانبخش آبکنار

نوع مطلب : HTML 5 ،طراحی وب ،