HTML 5.0 - Video
Until now, there has never been a standard for showing video on a web page.
Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins.
HTML5 specifies a standard way to include video, with the video element.
Currently, there are 2 supported video formats for the video element:
| Format |
IE 8 |
Firefox 3.5 |
Opera 10.5 |
Chrome 3.0 |
Safari 3.0 |
| Ogg |
No |
Yes |
Yes |
Yes |
No |
| MPEG 4 |
No |
No |
No |
Yes |
Yes |
- Ogg = Ogg files with Thedora video codec and Vorbis audio codec
- MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
To show a video in HTML5, this is all you need:
<video src="movie.ogg" controls="controls">
</video>
The control attribute is for adding play, pause, and volume controls.
It is also always a good idea to include the width and height attributes.
Insert content between the <video> and </video> tags for browsers that do not support the video element:
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
The example above uses an Ogg file, and will work in Firefox, Opera and Chrome.
To make the video work in Safari, the video file must be of type MPEG4.
The video element allows multiple source elements. Source elements can link to different video files. The browser will use the first recognized format:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
| Attribute |
Value |
Description |
| autoplay |
autoplay |
Specifies that the video will start playing as soon as it is
ready |
| controls |
controls |
Specifies that controls will be displayed, such as a play
button. |
| height |
pixels |
Specifies the height of the video player |
| loop |
loop |
Specifies that the media file will start over again, every
time it is finished. |
| preload |
preload |
Specifies that the video will be loaded at page load, and ready
to run. Ignored if "autoplay" is present. |
| src |
url |
Specifies that the URL of the video to play |
| width |
pixels |
Specifies the width of the video player |
