آموزش HTML – تگ video

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/16 | بخش : آموزش HTML

تعریف و کاربرد تگ 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 اندازه عرض ویدئو را مشخص می کند.