راهنما

آموزش مقدماتی HTML5 | تگ‌های ویدیو و صدا در HTML

تگ <video> برای نمایش ویدیو

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

ساختار تگ <video>

تگ <video> به شکل زیر نوشته می‌شود:

<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

ویژگی‌های مهم تگ <video>

  1. width و height: این دو ویژگی برای تعیین ابعاد ویدیو به کار می‌روند. شما می‌توانید این مقادیر را به دلخواه تنظیم کنید.

  2. controls: این ویژگی به ویدیو کنترل‌هایی مانند دکمه پخش، توقف، و نوار جابجایی اضافه می‌کند. اگر این ویژگی را حذف کنید، ویدیو بدون کنترل‌ها پخش می‌شود.

  3. source: این تگ برای تعیین منبع ویدیو استفاده می‌شود. شما می‌توانید چندین منبع ویدیو را مشخص کنید تا مرورگر بتواند بهترین فرمت را انتخاب کند. در مثال بالا، دو فرمت مختلف (mp4 و ogg) برای ویدیو مشخص شده است.

  4. message fallback: در صورتی که مرورگر کاربر از تگ <video> پشتیبانی نکند، متن بین تگ‌های <video> نمایش داده می‌شود. این متن می‌تواند به کاربر اطلاع دهد که مرورگر او قادر به پخش ویدیو نیست.

مثال عملی

در زیر یک مثال ساده از نحوه استفاده از تگ <video> آورده شده است:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال ویدیو</title>
</head>
<body>
    <h1>پخش ویدیو با استفاده از تگ &lt;video&gt;</h1>
    <video width="640" height="360" controls>
        <source src="example.mp4" type="video/mp4">
        <source src="example.ogg" type="video/ogg">
        ویدیو شما در اینجا پخش نمی‌شود.
    </video>
</body>
</html>

در این مثال، یک ویدیو با ابعاد 640 در 360 پیکسل ایجاد شده است که کاربر می‌تواند آن را پخش کند. اگر مرورگر کاربر از تگ <video> پشتیبانی نکند، پیام "ویدیو شما در اینجا پخش نمی‌شود." نمایش داده می‌شود.

نکات مهم

  • اطمینان حاصل کنید که ویدیوهای شما در فرمت‌های مختلف (مانند MP4 و OGG) موجود هستند تا از سازگاری با مرورگرهای مختلف اطمینان حاصل کنید.
  • می‌توانید ویژگی‌های دیگری مانند autoplay (برای پخش خودکار ویدیو)، loop (برای پخش مکرر ویدیو) و muted (برای پخش بدون صدا) را نیز به تگ <video> اضافه کنید.

با استفاده از تگ <video>، شما می‌توانید ویدیوهای جذابی را در وب سایت خود قرار دهید و تجربه کاربری بهتری را برای بازدیدکنندگان خود فراهم کنید.

پرسش و پاسخ این درس

برای ثبت پرسش ابتدا در سایت وارد شوید.

  • 1
  • 2