برای جستجو کلمه مورد نظر خود را وارد کنید

Movie Player

به نام خدا

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

این متد در مرورگر های مختلف نما های مختلفی دارد.اما در مرورگر Google Chrome بصورت متریال دیزاین نمایش داده می شود.

این متد برای پخش آنلاین فایل های ویدئویی ساخته شده است و سازگاری خوبی با اندروید دارد.

– – – – – – – – – –

در زیر با تعدادی از انواع نما ها آشنا می شوید:

• متد Video در مرورگر Microsoft Edge:

Movie Player

• متد Video در مرورگر Mozilla Firefox:

Movie Player

• متد Video در مرورگر پیش فرض اندروید:

Movie Player

• متد Video در مرورگر Google Chrome:

Movie Player

– – – – – – – – – –

آموش استفاده و تغییر اندازه:

ابتدا کد زیر رو در جایی که می خواید Video Player اجرا بشه کپی کنید.

<!-- Start Box Online Video -->
<video class="g-item current" style="width: 100%;" controls="controls">
<source type="video/mp4" src="Your Video Address"> 
</video> 
<!-- End Box Online Video -->

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

اگر این کد رو در محل مناسبی کپی کرده باشید و به جای Your Video Address آدرس فایل ویدئویی خودتون رو وارد کرده باشید،نمونه مثل زیر خواهد بود:


کد بالا ، Video Player را تا جایی که امکان دارد (ساختار قالب اجازه می دهد) به گوشه های مطلب اضافه می کند.(متغیر با عرضِ نوشته است)ولی رسپانسیو است.(واکنش گرا)

برای اینکه این Video Player به اندازه ی دلخواه شما باشد،می توانید کد زیر را در سورس Audio Player پیدا کنید و مقدار کد قرمز شده ی زیر با واحد pt را تغییر دهید.البته در این صورت واکنش گرایی خود را از دست می دهد.(هر ۳ Point یا pt برابر ۱ میلی متر است)

style="width: 100%;"

بعد از تغییر، کد مانند نمونه ی زیر خواهد شد:

style="width: 400pt;"

و همینطور نمونه نمایشی مانند نمونه زیر:

 کار تمام است و شما می توانید از Video Player متریال دیزاین خود لذت ببرید.

برای راحتی کاربران نیز کد کامل پست برای دانلود گذاشته شده است.

اگر هرگونه اشکال در نصب،اجرا و… در مورد این پست داشتید در بخش نظرات اعلام کنید!

Movie Player