تگ 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
| مرورگر | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | بله | بله | بله |
| Chrome | بله | بله | بله |
| Firefox | بله | بله | بله |
| Safari | بله | بله | خیر |
| Opera | بله | بله | بله |
پشتیبانی مرورگر ها
اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل عنصر را پشتیبانی می کند.
| عنصر | |||||
|---|---|---|---|---|---|
<video> | 4.0 | 9.0 | 3.5 | 3.1 | 11.5 |
خواص
| خاصیت | مقدار | توضیحات |
|---|---|---|
| autoplay | autoplay | بعد از بارگیری کامل سند ویدیو به صورت خودکار شروع می شود |
| controls | controls | جهت نمایش دکمه های کنترل (مثل دکمه پخش ، دکمه تنظیم صدا ، دکمه دانلود و…) استفاده می شود |
| height | pixels | اندازه ارتفاع ویدیو را مشخص میکند |
| loop | loop | مشخص می کند که بعد از تمام شدن ویدیو دوباره اجرا شود |
| muted | muted | مشخص می کند که خروجی صدای فیلم باید بی صدا باشد |
| poster | URL | یک پوستر یا یک تصویر شاخص را برای ویدیو مشخص میکند (این تصویر تا قبل از پخش ویدیو بروی ویدیو نمایش داده می شود) |
| preload | auto metadata none | نحوه بارگیری ویدیو را هنگام بارگیری صفحه مشخص میکند |
| src | URL | URL فایل ویدئو را مشخص می کند |
| width | pixels | عرض پخش کننده ویدیو را تنظیم می کند |
خواص عمومی
تگ video از خواص عمومی در HTML پشتیبانی میکند.
رویداد های عمومی
تگ video از رویداد های عمومی در HTML پشتیبانی میکند.
تنظیمات پیش فرض CSS
تگ video تنظیمات پیش فرضی ندارد ولی مرورگر ها با توجه به تنظیمات خودشان ویدیو را نمایش می دهند که با کد های CSS قابل تغییر و شخصی سازی است.
آیا این مطلب برای شما مفید بود ؟
راه شاد كردن ديگران (اخلاق خانواده)
و درود خدا بر او، فرمود: اى كميل خانواده ات را فرمان ده كه روزها در به دست آوردن بزرگوارى، و شب ها در رفع نياز خفتگان بكوشند.
سوگند به خدايى كه تمام صداها را مى شنود، هر كس دلى را شاد كند، خداوند از آن شادى لطفى براى او قرار دهد كه به هنگام مصيبت چون آب زلالى بر او باريدن گرفته و تلخى مصيبت را بزدايد چنان كه شتر غريبه را از چراگاه دور سازند.
حکمت 257 نهج البلاغه
