HTML 5 also provides support for the <video> element. The HTML video tag is utilized for embedding and streaming video files like movie clips or song clips directly onto a webpage.
Currently, there are three video formats compatible with the HTML video element:
- WebM
Let's examine the table that outlines the compatibility of video file formats with different web browsers.
| Browser | mp4 | webM | ogg |
|---|---|---|---|
| Internet Explorer | yes | no | no |
| Google Chrome | yes | yes | yes |
| Mozilla Firefox | yes | yes | yes |
| Opera | no | yes | yes |
| Apple Safari | yes | no | no |
Android also supports mp4 format.
HTML Video Tag Example
Let's review the code to showcase an mp4 file playback utilizing the HTML video element.
<video controls>
<source src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type="video/mp4">
Your browser does not support the html video tag.
</video>
Let's examine an example demonstrating how to play an ogg file using the HTML video element.
<video controls>
<source src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type="video/ogg">
Your browser does not support the html video tag.
</video>
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<video> |
Yes | Yes | Yes | Yes | Yes |
Attributes of HTML Video Tag
Let's check out the attributes of the video tag in HTML5.
| Attribute | Description |
|---|---|
| controls | It defines the video controls which is displayed with play/pause buttons. |
| 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 | It specifies the image which is displayed on the screen when the video is not played. |
| autoplay | It specifies that the video will start playing as soon as it is ready. |
loop |
It specifies that the video file will start over again, every time when it is completed. |
| muted | It is used to mute the video output. |
| preload | It specifies the author view to upload video file when the page loads. |
src |
It specifies the source URL of the video file. |
HTML Video Tag Attribute Example
Let's explore an example of the video element in HTML, showcasing the utilization of attributes such as height, width, autoplay, controls, and loop.
<video width="320" height="240" controls autoplay loop>
<source src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type="video/mp4">
Your browser does not support the html video tag.
</video>
MIME Types for HTML Video format
The HTML video tag supports various MIME types and is shown below.
| Video Format | MIME Type |
|---|---|
mp4 |
video/mp4 |
ogg |
video/ogg |
webM |
video/webM |