ویدئو در html 5

مثال ویدئو در html

ویدیو
مشاهده مثال

پخش فیلم ها در HTML

قبل از HTMl5  ، برای پخش ویدئو در مرورگر باید از پلاگین( مثل flash) استفاده میشد.

عنصر <video>در html5 یک روش استاندارد برای قراردادن یک ویدئو در صفحه وب مشخص می کند.

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

شماره های داخل جدول زیر نشان دهنده اولین ورژن مرورگری است که بصورت کامل  عنصر <video> را پشتیبانی می  کند.

Browser Support

عنصر <video>

برای نمایش یک ویدئو در html از عنصر <video> استاده کنید.

تگ video
 <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> 
مشاهده مثال

 عملکرد

ویژگی کنترل ها، کنترل های ویدئو مثل play  ، pause و  volume را اضافه می کنند.

ایده ی خوبی است که این کنترل ویژگی عرض و ارتفاع داشته باشد. اگر ارتفاع و عرض تنظیم نشود، ممکن است صفحه هنگام بارگیری ویدیو، دچار مشکل شود.

عنصر  <source> به شما این امکان را می دهد که فایل های ویدئویی جایگزین را که مرورگر از آن انتخاب می کنید، مشخص کند. مرورگر از اولین فرمت شناخته شده استفاده خواهد کرد.

متنی که بین دو تگ <video> و  </video>قرار می گیرد، در مرورگری که از  تگ <video>  پشتیبانی نمی کند، نمایش داده می شود.

<video> پخش خودکاردر HTML 

برای پخش خودکار ویدئو  از این ویژگی استفاده کنید:

پخش خودکار
 <video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> 
مشاهده مثال

ویژگی پخش خودکار در دستگاه های موبایل مثل iPad   و  iPhone اجرا نمی شود.

پشتیبانی مرورگر – ویدئو

در html5 3 فرمت MP4 ، WebM  و Ogg پشتیبانی می شود.

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

مرورگر
MP4
WebM
Ogg
Internet Explorer
بله
نه
نه
Chrome
بله
بله
بله
Firefox
بله
بله
بله
Safari
بله
نه
نه
Opera
بله (from Opera 25)
بله
بله

HTML ویدیو – انواع رسانه

قالب فایل
نوع رسانه
MP4
video/mp4
WebM
video/webm
Ogg
video/ogg

 

متدها، خواص  و رویداد ها – ویدئو در html

HTML5  متدهای Dom، خواص و رویداد هایی را برای عنصر <video> تعریف کرده است که به شما این امکان را می دهد تا ویدئو را  load، playو  pause کنید.

استفاده از جاوا اسکریپت


مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط