The HTML <video>
element is used to show a video on a web page.
The HTML <video> Element
To show a video in HTML, use the <video>
element:
Example
<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 it Works
The controls
attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width
and height
attributes. If height and width are not set, the page might flicker while the video loads.
The <source>
element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
The text between the <video>
and </video>
tags will only be displayed in browsers that do not support the <video>
element.
HTML <video> Autoplay
To start a video automatically, use the autoplay
attribute:
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
Add muted
after autoplay
to let your video start playing automatically (but muted):
Example
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Browser Support
The numbers in the table specify the first browser version that fully supports the <video>
element.
Element | |||||
---|---|---|---|---|---|
<video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML Video Formats
There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:
Browser | MP4 | WebM | Ogg |
---|---|---|---|
Edge | YES | YES | YES |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | YES | NO |
Opera | YES | YES | YES |
HTML Video – Media Types
File Format | Media Type |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
HTML Video – Methods, Properties, and Events
The HTML DOM defines methods, properties, and events for the <video>
element.
This allows you to load, play, and pause videos, as well as setting duration and volume.
There are also DOM events that can notify you when a video begins to play, is paused, etc.
HTML Video Tags
Tag | Description |
---|---|
<video> | Defines a video or movie |
<source> | Defines multiple media resources for media elements, such as <video> and <audio> |
<track> | Defines text tracks in media players |