1449
جزئیات وبلاگ
شروعی بر ویدئو در HTML5
در گذشته و حتی امروزه توسعه دهندگان و طراحان وب زمانی که میخواستند یک ویدئو یا صدا را درون سایت خود داشته باشند حتما باید از پلاگین هایی مانند flash یا silverlight استفاده میکردند. اما با وجود HTML5 میتوان به سادگی این عناصر را داخل سایت داشته باشیم.
در این مطلب به چگونگی کار با video در HTML5 میپردازیم.
فرمت های Video
اولین توقف ما در این سفر فرمت های Video است. در پایین سه فرمت اصلی Video در وب را قرار دادیم. همانطور که میبینید هیچ کدام از آنها توسط همه مرورگرها پشتیبانی نمیشوند.
فرمت های ویدئو در وب
اگر میخواهید مطمئن باشید که کاربر مورد نظر شما از هر مرورگری که استفاده میکند بتواند ویدئو را ببینید در ادامه با ما همراه باشید.
پیشنهاد: میتوانید از Firefogg برای تبدیل ویدئو به فرمت های وب استفاده کنید.
عنصر video
برای گذاشتن ویدئو در سایتتان باید از عنصر video استفاده کنید. مرورگرهای پشتیبانی کننده HTML5 ویدئو شما را از آدرسی که شما در خصوصیت src قرار خواهید داد ویدئو شما را بارگذاری خواهند کرد. شما میتوانید با دادن خاصیت های width و height, عرض و ارتفاع ویدئو را مشخص کنید.
|
1
|
<video src=” my_video.webm” width=”300” height=”200”> |
کد بالا مثال ساده ای از استفاده از عنصر video داخل یک سایت است. اما شما بدلیل اینکه میخواهید ویدئو شما در همه مرورگرها به درستی نمایش داده شود باید فرمت های دیگر را نیز قرار دهید. برای اینکار شما به عنصر source احتیاج دارید. این عنصر داخل تگ video قرار میگیرد و با استفاده از خاصیت src فرمت های مختلف را قبول میکند. در صورت استفاده از source نباید از خاصیت src در تگ video استفاده کرد.
|
1
2
3
4
5
|
<video width=”300” height=”200”> <source src=”my_video.webm” type=”video/webm”> <source src=”my_video.mp4” type=”video/mp4”> <source src=”my_video.ogg” type=”video/ogg”> |
وقتی که مرورگر میبیند داخل تگ video چنیدین فرمت وجود دارد اولین فرمتی را که پشتیبانی کند انتخاب میکند.
شما همچنین میتوانید پیغامی در انتهای تگ video بزارید تا زمانی که مروگر کاربر شما از HTML5 پشتیبانی نکرد آن را نمایش دهد.
|
1
2
3
4
5
6
|
<video width=”300” height=”200”> <source src=”my_video.webm” type=”video/webm”> <source src=”my_video.mp4” type=”video/mp4”> <source src=”my_video.ogg” type=”video/ogg”>Your Browser dosen`t support HTML5, you can download this video is here. |
خاصیت های تگ video
شما با استفاده از خاصیت controls در تگ video میتوانید امکان کنترل ویدئو را به کاربر بدهید. امکاناتی مانند Pause, Play, Sound, FullScrenn .
|
1
|
<video src=”my_video.webm” width=”300” height=”200” controls> |
با کمک خاصیت loop میتوانید در صورت تمام شدن ویدئو به مرورگر بگویید به صورت خودکار آن را Play کند.
|
1
|
<video src=”my_video.webm” width=”300” height=”200” loop> |
خاصیت poster این امکان را به شما میدهد که تا زمانی که کاربر هنوز ویدئو را Play نکرده است به جای صفحه مشکی یک عکس قرار بدهید.
|
1
|
<video src=”my_video.webm” width=”300” height=”200” poster=”my_video_1frame.png” > |
خاصیت muted هم امکان حذف صدا ویدئو را به شما میدهد.
|
1
|
<video src=”my_video.webm” width=”300” height=”200” muted> |
و در انتها با خاصیت autoplay میتوانید زمانی که صفحه شما لود شد ویدئو نیز به صورت خودکار Play کند که توصیه نمیشود(حداقل در ایران).
|
1
|
<video src=”my_video.webm” width=”300” height=”200” autoplay> |
شروعی بر ویدئو در HTML5