Example

The control attribute adds video controls, like play, pause, and volume.

It is also a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the video loads).

You should also insert text content between the <video> and </video> tags for browsers that do not support the <video> element.

The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format.

Video Formats and Browser Support

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

Browser

MP4

WebM

Ogg

Internet Explorer 9+

YES

NO

NO

Chrome 6+

YES

YES

YES

Firefox 3.6+

NO

YES

YES

Safari 5+

YES

NO

NO

Opera 10.6+

NO

YES

YES

MP4 = MPEG 4 files with H264 video codec and AAC audio codec

WebM = WebM files with VP8 video codec and Vorbis audio codec

Ogg = Ogg files with Theora video codec and Vorbis audio codec

MIME Types for Video Formats

Format

MIME-type

MP4

video/mp4

WebM

video/webm

Ogg

video/ogg

HTML5 <video> - DOM Methods and Properties

HTML5 has DOM methods, properties, and events for the <video> and <audio> elements.

These methods, properties, and events allow you to manipulate <video> and <audio> elements using JavaScript.

There are methods for playing, pausing, and loading, for example and there are properties (like duration and volume). There are also DOM events that can notify you when the <video> element begins to play, is paused, is ended, etc.

The example below illustrate, in a simple way, how to address a <video> element, read and set properties, and call methods.