آموزش تگ video در HTML

آموزش تگ video در HTML

تگ <video> در HTML برای اضافه کردن ویدیو به صفحات وب استفاده می‌شود. این تگ به شما امکان می‌دهد تا ویدیوهای مختلف را به صورت مستقیم در صفحات وب خود نمایش دهید. در این مقاله، تمام جزئیات ویژگی‌ها و حالت‌های تگ <video> را بررسی خواهیم کرد و با مثال‌هایی آن‌ها را توضیح می‌دهیم.

1. تگ video در HTML

تگ <video> یک تگ خالی (یا بدون بسته شدن) است که برای افزودن ویدیو به صفحات وب استفاده می‌شود. این تگ به شما امکان می‌دهد تا ویدیوهای مختلف را از منابع مختلف مانند فایل‌های ویدیویی محلی یا URL‌های ویدیویی خارجی در صفحه وب خود نمایش دهید.

<video src="movie.mp4" controls></video>

2. ویژگی‌های تگ video

تگ <video> دارای ویژگی‌های زیر است:

  • src: مشخص می‌کند که ویدیویی که باید نمایش داده شود، از کجا بارگیری شود.
  • width: عرض ویدیو را مشخص می‌کند.
  • height: ارتفاع ویدیو را مشخص می‌کند.
  • controls: نمایش کنترل‌های پخش ویدیو مانند دکمه پخش، توقف و پیش‌برو در ویدیو.

3. مثال کامل

<video src="movie.mp4" width="640" height="360" controls></video>

در این مثال، یک <video> با عرض 640 پیکسل و ارتفاع 360 پیکسل ایجاد شده است که ویدیوی محلی به نام movie.mp4 را نمایش می‌دهد و دارای کنترل‌های پخش است.

4. استفاده از فرمت‌های ویدیویی مختلف

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

در این مثال، یک <video> با کنترل‌های پخش ایجاد شده است که دو منبع ویدیویی مختلف را شامل می‌شود. اگر مرورگر کاربر قادر به پخش یک فرمت ویدیویی نباشد، پیام “Your browser does not support the video tag.” نمایش داده می‌شود.

5. ویدیوهای آموزشی

<video src="tutorial.mp4" width="800" height="450" controls></video>

در این مثال، یک <video> به عرض 800 پیکسل و ارتفاع 450 پیکسل ایجاد شده است که ویدیوی آموزشی با نام tutorial.mp4 را نمایش می‌دهد و دارای کنترل‌های پخش است.

نتیجه

تگ <video> در HTML به شما امکان می‌دهد تا ویدیوهای مختلف را در صفحات وب خود نمایش دهید. این تگ دارای ویژگی‌های متنوعی است که به شما امکان می‌دهد محتوای ویدیویی را به دلخواه سفارشی‌سازی کنید. امیدواریم که این مقاله به شما کمک کرده باشد تا از تگ <video> در پروژه‌های خود بهتر استفاده کنید.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.