تگ video در HTML

  /  فرانت اند   /  HTML   /  تگ video در HTML

با استفاده از تگ video در HTML میتوانیم یک فایل ویدیویی تصویری مثل کلیپ یا فیلم را در سند قرار دهیم.

مثال

در مثال زیر یک فایل ویدیویی با دو فرمت .mp4 و .ogg به صفحه وب خود اضافه کرده ایم:

<video width="320" height="240" controls>
<source src="https://www.bubbleslearn.ir/wp-content/uploads/2021/07/movie.mp4" type="video/mp4">
<source src="https://www.bubbleslearn.ir/wp-content/uploads/2021/07/movie.ogv" type="video/ogg">
مرورگر شما از video پشتیبانی نمی کند.
</video>


تعریف و کاربرد

از تگ video در HTML برای قرار دادن فایل های ویدیویی تصویری مثل فیلم ها استفاده می کنیم.

تگ <video> حاوی یک یا چند عنصر <source> با منابع مختلف ویدیویی است ، مرورگر اولین منبعی را که پشتیبانی می کند انتخاب خواهد کرد.

متن بین تگ <video> و </video> فقط در صورتی نمایش داده می شود که مرورگر این عنصر را پشتیبانی نکند.

سه فرمت پشتیبانی شده در HTML وجود دارد: MP4 و OGG و WebM

مرورگرMP4WebMOgg
Edgeبلهبلهبله
Chromeبلهبلهبله
Firefoxبلهبلهبله
Safariبلهبلهخیر
Operaبلهبلهبله

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

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل عنصر را پشتیبانی می کند.

عنصر
<video>4.09.03.53.111.5

خواص

خاصیتمقدارتوضیحات
autoplayautoplayبعد از بارگیری کامل سند ویدیو به صورت خودکار شروع می شود
controlscontrolsجهت نمایش دکمه های کنترل (مثل دکمه پخش ، دکمه تنظیم صدا ، دکمه دانلود و…) استفاده می شود
heightpixelsاندازه ارتفاع ویدیو را مشخص میکند
looploopمشخص می کند که بعد از تمام شدن ویدیو دوباره اجرا شود
mutedmutedمشخص می کند که خروجی صدای فیلم باید بی صدا باشد
posterURLیک پوستر یا یک تصویر شاخص را برای ویدیو مشخص میکند (این تصویر تا قبل از پخش ویدیو بروی ویدیو نمایش داده می شود)
preloadauto
metadata
none
نحوه بارگیری ویدیو را هنگام بارگیری صفحه مشخص میکند
srcURLURL فایل ویدئو را مشخص می کند
widthpixelsعرض پخش کننده ویدیو را تنظیم می کند

خواص عمومی

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

رویداد های عمومی

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

تنظیمات پیش فرض CSS

تگ video تنظیمات پیش فرضی ندارد ولی مرورگر ها با توجه به تنظیمات خودشان ویدیو را نمایش می دهند که با کد های CSS قابل تغییر و شخصی سازی است.

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر