<video>

Video Tag

The <video> element is used in HTML to embed video content within a webpage.

Syntax

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

Attributes

• autoplay: Automatically plays the video when enough data is loaded. Use cautiously, as it may impact user experience.
• buffered: Provides a TimeRanges object indicating the buffered portions of the video.
• controls: Displays playback controls, including play, pause, and volume.
• crossorigin: Defines CORS settings for video fetching—anonymous (no credentials) or use-credentials (with credentials).
• height: Sets the video display height in CSS pixels.
• loop: Restarts the video automatically after it ends.
• muted: Starts the video with audio muted.
• played: A TimeRanges object showing played sections of the video.
• preload: Suggests how the browser should handle preloading—none, metadata, or auto.
• poster: Specifies an image to display before the video starts or when paused.
• src: Defines the video file URL. The <source> element can also be used inside the <video> tag.
• width: Sets the width of the video.

Events & Usage

• Events: The <video> element triggers various events during playback.
• Usage: Multiple video sources can be provided using the src attribute or the <source> element. The browser selects the best-supported format. For more details, refer to the documentation on compatible media formats.

Example

<video width="220" height="140" controls>
  <source src="video.mp4" type="video/mp4" />
</video>

Key Attributes

• controls: Enables video playback controls.
• autoplay: Starts playback automatically.
• poster: Displays a thumbnail before the video starts.

HTML Video with Autoplay and Thumbnail

<video width="450" height="250" autoplay poster="thumbnail.png">
  <source src="video.mp4" type="video/mp4" />
</video>

Conclusion

The <video> tag in HTML is a powerful element for embedding video content directly within webpages. It offers a range of attributes such as controls and poster to enhance user experience, giving users control over playback and providing visual cues before the video starts. With support for multiple video formats through the <source> element, it ensures compatibility across different browsers.