HTML Video
HTML <video> Element
The HTML <video> element is used to show a video on a web page.
It supports playback controls like play, pause, volume, and fullscreen.
Example
The HTML code:
<video width="400" controls>
<source src="mov_bbb.mp4"
type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
Result
Video courtesy of Big Buck Bunny.
HTML <video> Attributes
The controls attribute adds video controls, like play, pause, volume
and full screen.
It is also a good idea to 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 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 controls 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>
Try it Yourself »
Tip: Add muted after
autoplay to let your video start playing automatically (but muted):
Example
<video controls 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>
Try it Yourself »
HTML <video> Loop
The loop attribute specifies that the video will start over again, every time it is finished:
Example
<video controls width="320" height="240" autoplay loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Try it Yourself »
Supported Video Formats in HTML5
The supported video formats in HTML are:
| Video Format | File Extension | Media Type |
|---|---|---|
| MPEG-4 or MP4 |
.mp4 | video/mp4 |
| Ogg | .ogg | video/ogg |
| WebM | .webm | video/webm |
HTML <video> and JavaScript
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.
For a full DOM reference, go to our HTML Audio/Video DOM Reference.
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 |
