Playing Videos in HTML
There was no standard format to show videos on a web page before the launch of HTML5,.
Videos was only played using a plug-in (like flash).
The HTML5 <video> element is used to specify a standard way of embeding a video in a web page.
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
The HTML <video> Element
For showing a video in HTML, make use of 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>
Try it Yourself
How it Works
The controls attribute is used to add video controls, like play, pause, and volume.
It is a good method to always use width and height attributes.
If height and width are not mentioned, the browser will not know the size of the video. The effect of this is that page will be changing (or flicker) while the video gets loaded.
Text between the <video> and </video> tags will only get displayed in browsers which do not support the <video> element.
Multiple <source> elements can be used to link different video files. The browser will be using the first recognized format.
HTML <video> Autoplay
For starting a video automatically make use of 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>
Try it Yourself
The autoplay attribute will not work in mobile devices like iPad and iPhone.
HTML Video - Browser Support
At present, 3 video formats are supported for the <video> element: MP4, WebM, and Ogg:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
HTML Video - Media Types
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML5 Video Tags