آموزش تگ 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 - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

بیشتر بخوانید
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

بیشتر بخوانید
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

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

نظرات

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

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