آموزش تگ 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> در پروژه‌های خود بهتر استفاده کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام