تگ video در html

تگ video برای قرار دادن محتوای ویدیویی در یک صفحه است، تگ <video> حاوی یک یا چند تگ <source> با فرمت‌های صوتی مختلف است که مرورگر اولین فرمتی را که پشتیبانی می کند در نظر می‌گیرد.

متن بین تگ‌های <video> و </video> فقط در مرورگرهایی نمایش داده می‌شود که از تگ <video> پشتیبانی نمی‌کنند. MP4، WebM، و OGG سه فرمت ویدیویی پشتیبانی شده در HTML هستند.

<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> 

تگ video می‌تواند دارای چندین ویژگی یا attribute باشد که برخی از این ویژگی‌های ضروری و برخی دیگر اختیاری هستند.

ویژگی src آدرس فایل صوتی را مشخص می کند. با توجه به اینکه فرمت‌هایی چون OGG در تمامی مرورگرها پشتیبانی نمی‌شود پیشنهاد می‌شود با از تگ source فرمت‌های مختلف را قرار داده تا فایل صوتی در تمامی مرورگرها پشتیبانی شود.

<video src="movie.ogg" controls>
  Your browser does not support the video tag.
</video> 

ویژگی controls در صورت وجود، مشخص می کند که کنترل های ویدیویی باید نمایش داده شوند. کنترل های صوتی باید شامل موارد زیر باشند.

• Play
• Pause
• Seeking
• Volume
• Fullscreen toggle
• Captions/Subtitles (در صورت موجود بودن)
• Track (در صورت موجود بودن)

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

ویژگی autoplay برای پخش خودکار است و در صورت وجود، ویدیو به‌محض اینکه صفحه بارگذاری شود پخش خواهد شد. توجه داشته باشید برخی از مرورگرها ممکن است اجازه پخش خودکار را ندهند.

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

ویژگی muted برای بی صدا کردن فایل ویدیویی در هنگام پخش است.

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

ویژگی loop به مانند replay عمل کرده و پس از پایان، فایل ویدیویی مجددا پخش خواهد شد.

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

ویژگی preload یا پیش بارگذاری شرایطی را فراهم می‌سازد تا فایل صوتی قبل از پخش به صورت خودکار بارگذاری شود.

مقادیر:

• none: در این حالت از preload شدن فایل صوتی جلوگیری می‌شود.
• auto: در این حالت فایل صورتی به صورت خودکار پخش و preload می‌شود.
• metadata: در این حالت اطلاعاتی مانند نام، فرمت و طول فایل preload می‌شود.

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

ویژگی پوستر تصویری را مشخص می‌کند که در حین بارگیری ویدیو یا تا زمانی که کاربر روی دکمه play کلیک کند، نمایش داده شود. اگر این ویژگی اضافه نشود، از اولین فریم ویدیو استفاده خواهد شد.

<video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video> 

ویژگی height و width از ویژگی‌های ضروری تگ 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>  

تگ <video> از Global Attributes در HTML پشتیبانی می کند.

تگ <video> از Event Attributes in HTML در HTML پشتیبانی می کند.

اکثر مرورگرها تگ <video> را با مقادیر پیش فرض زیر نمایش می دهند:

video {
  display: inline;
}