The <video> tag creates a video player on a web page.
This player support video playback directly inside the HTML page with media controls, such as, start, stop, volume, and others.
A <video> with media controls (start, stop, volume, etc).
<video width="320" controls>
<source src="/media/movie.mp4" type="video/mp4">
</video>
The <video> tag creates a media player for video files directly onto a page.
This element supports three different video formats: MP4, WebM, and OGG.
The <video> element can also play audio files, but the <audio> tag provides a better user experience.
A <video> element with two <source> tags.
Each <source> specifies a video source file.
The browser uses the first supported file format it finds.
<video width="320" height="240" controls>
<source src="/media/movie.mp4" type="video/mp4">
<source src="/media/movie.ogg" type="video/ogg">
</video>
<video>This table lists the <video> tag optional attributes.
| Attribute | Value | Description |
|---|---|---|
| height | pixels | Sets the video player height in pixels. |
| width | pixels | Sets the video player width in pixels |
| src | URL | Defines the video file URL or path |
| controls | no value | Displays video controls (e.g. play, pause, volume). |
| autoplay | no value | Automatically plays the video as soon as it is ready. |
| id | identifier | Defines a unique identifier for the video. |
| class | classnames | Sets one or more CSS classes to be applied to the video. |
| style | CSS-styles | Sets the style for the video. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the video is hidden. |
| title | text | Sets a title that displays as a tooltip. |
| loop | no value | Plays the video again every time it's finished |
| muted | no value | Disables the audio output of the video. |
| poster | URL | Image to be shown before the video starts to play. |
| preload |
auto metadata none |
Defines how the video will be loaded on page load. |
| crossorigin | anonymous use-credentials |
Defines how the video handles cross-origin requests |
For additional global attributes see our global attributes list.
The poster attribute on a <video> tag adds a poster or image preview.
This preview image has a red 'PLAYING SOON' message.
<video poster="/img/html/playing-soon.png"
width="320" height="240" controls>
<source src="/media/movie.mp4" type="video/mp4">
<source src="/media/movie.ogg" type="video/ogg">
</video>
These are the media types (formerly MIME types) that are supported by the <video> element.
| Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
The <video> tag is part of a group of tags
that create multi-media experiences on the web.
This group is referred to as the Media tag group.
Together, they allow you to create powerful multi-media solutions.
Here is a list of media tags.
| Element | Description |
|---|---|
| <audio> | Creates a player for sound such as music, sound effects, or others |
| <video> | Creates a video player on a page |
| <source> | Adds a media source for a <video>, <audio>, or <picture> |
| <track> | Adds a text track, such as, subtitles and captions, to the media |
| <embed> | Creates a container for an external resource |
| <iframe> | Creates a frame in which another web page can be embedded |
| <svg> | Displays an scalable vector image |
| <canvas> | Creates a graphics container where JavaScript can draw |
| <img> | Displays an image |
| <area> | Specifies a map area for an image |
| <map> | Defines a client-side image map, i.e. an image with clickable areas |
| <figure> | Displays self-contained content, usually an image |
| <figcaption> | Adds a caption to a <figure> (image) element |
Here is when <video> support started for each browser:
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
3.5 | Jun 2009 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
10.5 | Mar 2010 |
 Safari
|
4.0 | Jun 2009 |
Video courtesy: Blender Foundation, www.bigbuckbunny.org
