آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش ایجاد ویدیو در صفحات وب با HTML5

دوره های مرتبط با این مقاله

آموزش استفاده از ویدیو در صفحات وب با استفاده از HTML5

در گذشته و شماره های قدیم HTML استفاده از ویدیو کار بسیار دشواری بود ولی در HTML5 افزودن یک ویدیو به لطف بروز رسانی از طرف مایکروسافت با سهولت بسیار قابل دسترس است .


به گونه ای که شما می توانید حتی تغییرات مورد دلخواه بر روی ویدیوی مورد نظر را اعمال نمایید .


آموزش نحوه اعمال ویدیو در صفحات وب

برای این کار می توانید از تگ ویدیو < Video > استفاده نمایید و آدرس ویدیوی مورد نظر را در تگ به صورت زیر کپی کنید :



   


                        

توضیح کد:

در تگ ویدیو خصیصه Controls به شما امکان استفاده از ابزارهای کنترل ویدیو در مرورگر را می دهد ، به گونه ای که بتوانید همانند یک Player در مرورگر خود با ویدیو برخورد نمایید و از امکان هدایت زمانی یا seeking ویدیو را دشته باشید تا بتوانید زمان مورد نظر خود را بیابید و از دیگر امکانات این ویدیو پلیر افزایش و کاهش میزان صدا است و در آخر امکان نمایش به صورت تمام صفحه و یا اندازه ی اصلی ویدیو را دارا می باشید .


نکته :

در صورت عدم تنظیم ابعاد ویدیو های بارگذاری شده در صفحه HTML5 هر ویدیو با ابعاد پیش فرض خود فایل در صفحه پخش خواهد شد .


برای جلوگیری از این بهم ریختگی در صفحه شما می توانید با تعیین ابعاد به صورت دلخواه ، به مرتب نمودن فایل های ویدیویی خود از نظر ابعاد اقدام نمایید .


شما کافیست از property های height و width را استفاده نمایید .


به کد زیر دقت نمایید :



   

                        

نکته :

باید همواره به یاد داشته باشید که فرمت های ویدیویی قابل پشتیبانی در HTML5 سه فرمت Mp4 ، Ogg و Webm می باشد ، در غیر این صورت باید با استفاده از یک Converter به یکی از فرمت یاد شده تغییر داده شود .


آموزش استفاده از پوستر برای پیش نمایش ویدیو در صفحات وب در HTML5


برای استفاده از یک پوستر برای پیش نمایش در فایل ویدیویی کافیست شما از property به نام poster در تگ < video > همانند زیر استفاده نمایید :


                               

در زمانی که ویدیوی شما هنوز اجرا نشده است عکس انتخابی شما به عنوان یک پوستر به نمایش گذاشته می شود .


آموزش ورژن های پشتیبان کننده از تگ Video در HTML5

در این بخش به شما ورژن های پشتیبانی کننده از این تگ Video را آموزش خواهیم داد .


مروگر
Chrome
Internet explore
Firefox
Safari
Opera
نسخه
4.0
9.0
3.5
4.0
10.5

آموزش پشتیبانی مرورگرها از فرمت ویدیویی در HTML5

در این قسمت درباره این که هر مرورگر از چه فرمتی پیشتبانی می کند بحث خواهیم کرد .


Browser
MP4
WebM
Ogg
Internet Explorer
YES
NO
NO
Chrome
YES
YES
YES
Firefox
YES
YES
YES
Safari
YES
NO
NO
Opera
YES (from Opera 25)
YES
YES

آموزش انواع رسانه در صفحات وب با HTML5

Media Type
File Format
video/mp4
MP4
video/webm
WebM
video/ogg
Ogg

  • 696
  •    696
  • تاریخ ارسال :   1396/05/01

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .