آموزش تگ video در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ video در HTML با من همراه باشید.

آموزش تگ video در HTML

Free-Learn

تگ Video در HTML

تگ video تگی است که در HTML5 اضافه شده و با استفاده از آن میتوان یک ویدئو ، کلیپ و یا در کل یک فایل تصویری را در یک صفحه وب قرار داد.

تگ Video در HTML5 از ۳ فرمت (یا پسوند) ویدئویی برای نمایش ویدئو در صفحات وب پشتیبانی میکند که این ۳ فرمت به شرح جدول زیر می باشد :

نام مرورگر MP4 WebM Ogg
Internet Explorer بله (پشتیبانی می شود) خیر (پشتیبانی نمی شود) خیر (پشتیبانی نمی شود)
Chrome بله (پشتیبانی می شود) بله (پشتیبانی می شود) بله (پشتیبانی می شود)
Firefox بله (پشتیبانی می شود) بله (پشتیبانی می شود) بله (پشتیبانی می شود)
Safari بله (پشتیبانی می شود) خیر (پشتیبانی نمی شود) خیر (پشتیبانی نمی شود)
Opera بله (پشتیبانی می شود) بله (پشتیبانی می شود) بله (پشتیبانی می شود)

همانطورم که در جدول بالا مشاهده مینمایید، تنها فرمت MP4 هست که در تمامی مرورگرها به خوبی پشتیبانی می شود، لذا سعی کنید همیشه از این فرمت برای فایل های ویدئویی تان استفاده نمایید.

  • MP4 > فایل های MPEG4 با کدک های ویدئویی H264 و کدک های صوتی AAC
  • WebM > فایل های WebM با کدک ویدیو VP8 و کدک صوتی Vorbis
  • Ogg > فایل های Ogg با کدک Video Theora و کدک صوتی Vorbis

جدول نوع رسانه ویدئویی در HTML

هر یک از فرمت های موجود در جدول بالا دارای یک نوع متن یا یک نوع رسانه ای می باشند که ما باید نوع رسانه مون رو با استفاده از مقادیر جدول زیر مشخص نماییم.

فرمت فایل نوع رسانه
MP4 video/mp4
WebM video/webm
Ogg video/ogg

در این وبسایت میتوانید نوع رسانه تمامی فایل های همچون تصویری / صوتی / متنی و.. را مشاهده نمایید.

Free-Learn

مثال از تگ video در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

امتحان کنید

مثال شماره ۲ : قرار دادن یک متن دلخواه درون تگ video جهت نمایش به کاربر، برای زمانی که مرورگر کاربر از تگ video پشتیبانی نکند.

امتحان کنید

مثال شماره ۳ : تنظیم پخش خودکار ویدئو (ممکن است در مرورگرهای مدرن از پخش خودکار جلوگیری شود لذا میتوانید از طریق آموزش فعالسازی پخش خودکار در مرورگرها این امکان را فعال و یا غیرفعال نمایید)

امتحان کنید

مثال شماره ۴ : تکرار پخش ویدئو (دوباره پخش شدن ویدئو به محض تمام شدن)

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ video در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی ۴٫۰ ۳٫۵ ۱۰٫۵ ۴٫۰ ۹٫۰

Free-Learn

جدول صفات تگ video در HTML

در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.

نام صفت مقدار توضیح
autoplay autoplay باعث می شود ویدئو بصورت خودکار به محض بالا اومدن صفحه پخش شود.
controls controls جهت نمایش دکمه های کنترل (مثله دکمه پخش،دکمه تنظیم صدا و..).
height pixels اندازه ارتفاع ویدئو را مشخص میکند.
loop loop باعث می شود ویدئو به محض تمام شدن دوباره پخش شود.
muted muted جهت قطع کردن صدای ویدئو.
poster URL یک پوستر یا یک تصویر شاخص را برای ویدئو مشخص میکند.
(این تصویر تا قبل از پخش ویدئو بروی ویدئو نمایش داده می شود)
preload auto
metadata
none
نحوه بارگذاری یا لود شدن ویدئو را در هنگام لود شدن صفحه مشخص میکند.
src URL آدرس یا مسیر فایل ویدئویی را مشخص میکند.
width pixels اندازه عرض ویدئو را مشخص میکند.

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ video از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

ما میتوانیم یک متن دلخواه را درون تگ video قرار دهیم تا اگر مرورگر کاربر از این تگ پشتیبانی نکند، آن متن دلخواه به کاربر نمایش داده شود و کاربر دلیل پخش نشدن ویدئو را متوجه شود. (همانند مثال شماره ۲)

Free-Learn

دستورات CSS پیش فرض

این تگ هیچ دستور CSS پیش فرضی ندارد.

Free-Learn