How to Embed Video Using HTML5

After HTML5 came all modern web browsers supporting video and audio playing. In which it introduces built-in media support via the <audio> and <video> elements, offering the ability to easily embed media into HTML documents.

With Microsoft recently announcing it will support the HTML5 video tag in the coming Internet Explorer 9, expect even more sites to abandon Flash for native video. Embed Video Using HTML5

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 browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads.

Text between the <video> and </video> tags will only display in browsers that do not support the <video> element.

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

Multiple source files can be specified using the <source> element in order to provide video or audio encoded in different formats for different browsers. For instance:

This plays the Ogg file in browsers supporting the Ogg format. If the browser doesn’t support Ogg, the browser uses the MPEG-4 file.

You may also specify which codecs the media file requires; this allows the browser to make even more intelligent decisions:

We specify that the video uses the different format of codecs.but not the specified codecs, so the video will not loaded.

Browser Support

The numbers in the table specify the first browser version that fully supports the <video> element.

Element Chrome  IE  Firefox Safari Opera
<video> 4.0 9.0 3.5 4.0 10.5

HTML Video – Browser Support

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

Browser MP4 WebM Ogg
Internet Explorer YES NO NO
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


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *