The <video> element in HTML is used to show video content on web pages. It supports various video formats, including MP4, WebM, and Ogg. It is introduced in HTML5.
Syntax:
<video src="" controls> </video>
or
<video controls="controls">
<source src="video_filename" type="video_type">
</video>
Generally, we prefer the syntax with the <source> tag wrapped between the video tag because:
- It allows you to specify multiple <source> elements for different formats of the video (e.g., MP4, WebM, Ogg), improving cross-browser compatibility.
- By including the type attribute, you can tell the browser the exact MIME type of the video file, helping it determine whether it can play the file.
Attributes of the <video> Element
The following attributes can be used with the <video> tag to enhance video playback:
| Attribute | Description |
|---|---|
| controls | Adds playback controls such as play, pause, volume, etc. |
| width | Specifies the width of the video player. |
| height | Specifies the height of the video player. |
| autoplay | Automatically starts playing the video when it's loaded. |
| muted | Mutes the video by default. |
| src | Specifies the video file’s path. |
| type | Defines the format of the video (e.g., video/mp4, video/webm). |
Below is an example of using different attributes of video tag:
<html>
<body>
<video controls="" height="240" width="320">
<source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4"/>
Sample Video
</video>
</body>
</html>
- The <video> tag defines the video player, with width and height attributes setting its dimensions.
- The controls attribute adds playback controls like play, pause, and volume.
Supported Formats
Three different formats are commonly supported by web browsers - mp4, Ogg, and WebM. The table below lists the formats supported by different browsers:
Browser | MP4 | WebM | OGG |
|---|---|---|---|
| Google Chrome | Yes | Yes | Yes |
| Internet Explorer | Yes | No | No |
| Firefox | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes |
| Safari | Yes | Yes | No |
Example 1: Responsive Video
<html>
<head>
<style>
video {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto