ویدیو در HTML

ویدیو در HTML

عنصر <video> در HTML برای نمایش ویدیو در یک صفحه وب استفاده می‌شود.

عنصر <video> در HTML

برای نمایش یک ویدیو در HTML، از عنصر <video> استفاده کنید:

مثال

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

چگونه کار می‌کند

ویژگی controls کنترل‌های ویدیو مانند پخش، توقف و تنظیم صدا را اضافه می‌کند.

ایده خوبی است که همیشه ویژگی‌های width و height را نیز لحاظ کنید. اگر ارتفاع و عرض تنظیم نشوند، ممکن است صفحه هنگام بارگذاری ویدیو پرش (flicker) داشته باشد.

عنصر <source> به شما این امکان را می‌دهد که فایل‌های ویدیویی جایگزین را مشخص کنید تا مرورگر از بین آن‌ها انتخاب کند. مرورگر از اولین فرمتی که تشخیص دهد استفاده خواهد کرد.

متن بین تگ‌های <video> و </video> فقط در مرورگرهایی نمایش داده می‌شود که از عنصر <video> پشتیبانی نمی‌کنند.

پخش خودکار (Autoplay) ویدیو در HTML

برای شروع خودکار یک ویدیو، از ویژگی autoplay استفاده کنید:

مثال

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

نکته: مرورگرهای مبتنی بر Chromium در بیشتر موارد اجازه پخش خودکار را نمی‌دهند. با این حال، پخش خودکار بی‌صدا (muted) همیشه مجاز است.

کلمه muted را بعد از autoplay اضافه کنید تا ویدیوی شما به طور خودکار (اما بی‌صدا) شروع به پخش کند:

مثال

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

پشتیبانی مرورگر

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

فرمت‌های ویدیویی HTML

سه فرمت ویدیویی پشتیبانی شده وجود دارد: MP4، WebM و Ogg. پشتیبانی مرورگرها از فرمت‌های مختلف به شرح زیر است:

ویدیو در HTML - انواع رسانه (Media Types)

ویدیو در HTML - متدها، خصوصیات و رویدادها

HTML DOM متدها، خصوصیات و رویدادهایی را برای عنصر <video> تعریف می‌کند. این به شما امکان می‌دهد ویدیوها را بارگذاری، پخش و متوقف کنید، و همچنین مدت زمان و حجم صدا را تنظیم نمایید. رویدادهای DOM نیز وجود دارند که می‌توانند شما را از زمان شروع پخش ویدیو، توقف آن و غیره مطلع کنند.

مثال: استفاده از جاوااسکریپت

<button>پخش/توقف</button> <button>کوچک</button> <button>بزرگ</button> <button>عادی</button>

ویدیو با تشکر از Big Buck Bunny.

برای مشاهده مرجع کامل DOM، به مرجع DOM صدا/ویدیو در HTML ما بروید.

تگ‌های ویدیویی HTML