HTML Video

HTML Video

The <video> element is used to embed and play video content directly on a web page.

The <video> Element

To display a video in HTML, use the <video> element together with one or more <source> elements.

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

How the Video Element Works

• The controls attribute adds play, pause, and volume controls
• Setting width and height prevents layout shifts while the video loads
• The browser plays the first supported format listed in <source>
• Fallback text is shown only if the browser does not support video

Autoplay Video

The autoplay attribute starts video playback automatically.

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

Most modern browsers block autoplay with sound. Autoplay is allowed when the video is muted.

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

Supported Video Formats

HTML officially supports three video formats.

• MP4 (video/mp4)
• WebM (video/webm)
• Ogg (video/ogg)

MP4 is supported by all major browsers and is the most commonly used format.

Browser Compatibility

All modern browsers support the <video> element.

• Chrome, Edge, Firefox, Opera: MP4, WebM, Ogg
• Safari: MP4, WebM (no Ogg support)

Video Media Types

• video/mp4 – MP4 files
• video/webm – WebM files
• video/ogg – Ogg files

Video JavaScript API

The HTML DOM provides methods, properties, and events for controlling video playback.

You can play, pause, change volume, read duration, and respond to playback events using JavaScript.

HTML Video Tags

• <video> – defines a video player
• <source> – specifies alternative video files
• <track> – defines subtitles or captions