The <video> tag is used to embed video content in a document. It is used for streaming video files such as a movie clip, song clip on the web page.
HTML 5 supports <video> tag. The <video> tag contains one or more <source> tags with different video sources.
There are three video formats supported for HTML video tag: mp4, webM and ogg.
Attributes of HTML Video Tag
| Attribute | Description |
|---|---|
| controls | Specifies that video controls should be displayed (such as a play/pause button etc). |
| height | It is used to set the height of the video player. |
| width | It is used to set the width of the video player. |
| poster | Specifies an image to be shown while the video is downloading, or until the user hits the play button. URL for an image to be shown while the video is downloading. |
| autoplay | A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data. |
| loop | If specified the video file will start over again, every time when it is completed. |
| muted | It is used to mute the video output. |
| preload | Specifies if and how the author thinks the video should be loaded when the page loads. Possible values are: auto, metadata and none. |
| src | It specifies the source URL of the video file. |
The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML video element</title>
</head>
<body>
<h1>The video element</h1>
<video width="320" height="240" controls>
<source src="https://eywiah.com/wp-content/uploads/2021/12/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
MIME Types for HTML Video format
| Video Format | MIME Type |
|---|---|
| mp4 | video/mp4 |
| ogg | video/ogg |
| webM | video/webM |