Media VideoHTML
Media VideoHTML
❮ PreviousNext ❯
Example
Courtesy of Big Buck Bunny:
Try it Yourself »
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>
Try it Yourself »
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.
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>
Try it Yourself »
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>
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports
the <video> element.
Element
ADVERTISEMENT
MP4 video/mp4
WebM video/webm
Ogg video/ogg
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.
Try it Yourself »
For a full DOM reference, go to our HTML Audio/Video DOM Reference.
<source> Defines multiple media resources for media elements, such as <video>
<audio>