HTML Video

HTML provides a built-in way to embed video content into web pages using the <video> element.

Video Element

The <video> tag displays video files directly in the browser. It supports multiple formats and allows built-in controls for playback.

<video controls>
  <source src="video.mp4" type="video/mp4">
  The video tag is not supported by this browser.
</video>

Note: The message inside the tag appears if the browser doesn’t support video.

How It Functions

The <video> element has attributes such as controls, width, height, and nested <source> tags to define how a video appears and behaves on the page.

controls: shows play, pause, and volume buttons.
width & height: sets the display size of the video.
<source>: defines the video file and its type.

<video width="320" height="240" controls>
  <source src="sample.mp4" type="video/mp4">
  Browser does not support this video format.
</video>

Autoplay Attribute

Adding the autoplay attribute starts the video automatically when the page loads.

Note: Most browsers require the video to be muted for autoplay to work.

<video width="320" height="240" autoplay muted>
  <source src="autoplay-video.mp4" type="video/mp4">
</video>

Supported Video Formats

HTML supports various video file types, but compatibility may differ between browsers. Common formats include:

MP4: Best overall support.
WebM: High quality, open format.
OGG: Open format, less common.

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

Browser Compatibility

Most modern browsers support the HTML <video> element, including:

Google Chrome
Mozilla Firefox
Microsoft Edge
Safari (do not support Ogg format)
Opera

Note: Always provide multiple formats for better compatibility.

The <video> tag makes it easy to add videos to web pages. Using the right formats and attributes ensures smooth playback across different browsers.

Watch Video on YouTube

HTML Video