آموزش تگ ویدئو Video در HTML سورس کد
در این پست سعی میکنیم آموزش استفاده از تگ ویدیو را برای شما توضیح دهیم.چطور میتوانید ویدیو خود را در سایت اجرا کند؟
خب همانطور که از اسم این تگ مشخص هست با استفاده از این تگ میتوانید یک ویدیو یا کلیپ و فیلم را در صفحه وب سایت خود قرار دهید.
در html5 تنها فرمت های MP4 و WebM و Ogg پشتیبانی می شود و قابل نمایش خواهد بود.
پس حتما توجه داشته باشید ویدیو شما با این فرمت در سایت قرار گیرد.
تنها فرمتی که توسط تمامی مرورگرها پشتیبانی می شود فرمت MP4 می باشد.
| نام مرورگر | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | بله | بله | بله |
| Chrome | بله | بله | بله |
| Firefox | بله | بله | بله |
| Safari | بله | بله | خیر |
| Opera | بله | بله | بله |
جدول نوع رسانه ویدئویی در HTML
| فرمت فایل | نوع رسانه |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
تگ Video ( تگ ویدئو )
این تگ یک نوع تگ فرزند دار است و برای آدرس دادن سورس فیلم از تگ Source داخل تگ ویدئو استفاده می کنیم . تگ Video دارای شناسه های مختلفی است که در ادمه آن ها را مشاهده خواهید کرد :
شناسه Controls :
با استفاده از این شناسه در تگ ویدئو می توان در هنگام پخش فیلم ابزار کنترلی رو فعال کرد ابزارهایی مانند کم و زیاد کردن صدا ، مدت زمان فیلم ، دکمه پخش و … اگر از این شناسه استفاده نکنید این ابزار فعال نحواهد شد .
شناسه autoplay :
این در تگ ویدئو شناسه باعث می شود که در هنگام لود شدن صفحه فیلم به صورت خودکار پخش شود .
شناسه Width و Height :
برای اینکه اندازه فیلم رو تعیین کنیم از این شناسه ها استفاده می کنیم و طول و عرض فیلم را مشخص می کنیم .
شناسه muted :
اگر از این شناسه در تگ video استفاده بکنید فیلم رو بصورت mute در می آورد یا این شناسه فیلم رو به صورت حالت بی صدا در می آورد .
شناسه Poster :
با استفاد از این شناسه می توانیم یک عکس را به عنوان پوستر قبل از پخش شدن فیلم انتخاب کنیم .
<html> <head> <title>newwebdesign</title> </head> <body> <video width="600px" height="600px" controls autoplay muted poster="image.jpg"> <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> </video> </body> </html>
