تعریف و کاربرد تگ video در HTML
تگ <video> تگی است که در HTML5 اضافه شده و با استفاده از آن می توان یک ویدئو ، کلیپ و یا در کل یک فایل تصویری را در یک صفحه وب قرار داد.
در حال حاضر،برای تگ <video> مرورگرها از سه فرمت ویدئویی MP4 ،WebM و Ogg پشتیبانی می کنند.
- MP4: فایل های MPEG 4 با کدک تصویری H264 و کدک صوتی AAC
- WebM: فایل های WebM با کدک تصویری VP8 و کدک صوتی Vorbis
- Ogg: فایل های Ogg با کدک تصویری Theora و کدک صوتی Vorbis
نکته ها و ترفندها
در صورتی که مرورگر از عنصر <video> پشتیبانی نمی کند باید بین دو تگ <video> و <video/> متنی مناسب قرار داد تا کاربر متوجه شود که مرورگرش قابلیت پخش ویدئو را ندارد .
| نام مرورگر | MP4 | WebM | Ogg |
 |
بله (پشتیبانی می شود) | خیر (پشتیبانی نمی شود) | خیر (پشتیبانی نمی شود) |
 |
بله (پشتیبانی می شود) | بله (پشتیبانی می شود) | بله (پشتیبانی می شود) |
 |
بله (پشتیبانی می شود) | بله (پشتیبانی می شود) | بله (پشتیبانی می شود) |
 |
بله (پشتیبانی می شود) | خیر (پشتیبانی نمی شود) | خیر (پشتیبانی نمی شود) |
 |
بله (پشتیبانی می شود) | بله (پشتیبانی می شود) | بله (پشتیبانی می شود) |
انواع MIME برای فرمت های ویدئویی
| فرمت فایل | نوع رسانه |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
مثال از تگ video در HTML
<video controls>
<source src="https://www.sitekade.com/wp-content/uploads/2020/01/demo.mp4" type="video/mp4">
متاسفانه، مرورگر شما تگ ویدئو را پشتیبانی نمی کند
</video>تمرین کنید !
پشتیبانی مرورگرها از تگ video در HTML
| Element | |
|
|
|
|
| <video> | ۴٫۰ | ۳٫۵ | ۹٫۰ | ۴٫۰ | ۱۰٫۵ |
جدول صفات تگ video در HTML
| نام صفت | مقدار | توضیح |
| autoplay | autoplay | باعث می شود ویدئو بصورت خودکار به محض بالا اومدن صفحه پخش شود. |
| controls | controls | جهت نمایش دکمه های کنترل (مثله دکمه پخش،دکمه تنظیم صدا و..). |
| height | pixels | اندازه ارتفاع ویدئو را مشخص می کند. |
| loop | loop | باعث می شود ویدئو به محض تمام شدن دوباره پخش شود. |
| muted | muted | جهت قطع کردن صدای ویدئو |
| poster | URL | یک پوستر یا یک تصویر شاخص را برای ویدئو مشخص می کند. (این تصویر تا قبل از پخش ویدئو بروی ویدئو نمایش داده می شود) |
| preload | auto metadata none |
نحوه بارگذاری یا لود شدن ویدئو را در هنگام لود شدن صفحه مشخص می کند. |
| src | URL | آدرس یا مسیر فایل ویدئویی را مشخص می کند. |
| width | pixels | اندازه عرض ویدئو را مشخص می کند. |