How to use HTML5 video formats?

Before the advent of HTML 5, there was no standard format for exhibiting the videos on your web pages. HTML 5 video gives you a freedom of introducing the element of video to your browser. It partially replaces the object elements making it more interesting and exciting for the viewers. It is new technology which has been developed with an intention to show the videos on the internet without the use of any sort of plug-ins. Before HTML5 videos were only played using the Flash Player.

A brief overview of HTML 5 Video Format

This new standard video element was introduced in February 2007 by Opera Software. A special code was introduced by the company which can be used for embedding the videos on your web page referred to as WebM.

How to use the HTML5 video element?

You can use this code to embed videos on your web pages

<video src="movie.webm" poster="movie.jpg" controls>

For instance:

<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>

The working of HTML5 Video Format

The attribute of 'Controls' makes an addition of the video controls like pause, play, stop, volume and etc. So it is a recommended to make use of attributes of height and width. If you do not set the limit of height and width sizes then the browser will not be able to detect the video size. This will cause the flickering of the page while the video will be loading.

Text in between the tags will only show up in the browsers that do not provide support to the video element.

You can create links with various video files by using the multiple <source> elements. The browser will make use of the initial perceived formats.

How to introduce auto play in HTML5 Video Format?

If you want the browser to start the video automatically, then an auto play attribute can be introduced for instance;

<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>

Supported Video Formats

Presently, there are three video formats supported by the video element which are MP4, WebM and Ogg.

There are no specifications offered by HTML5 regarding which video type should be supported by the different browsers. The user agents have complete freedom of using any type of video type which they find suitable. However, the working group of HTML5 has made it desirable to at least single video type which is supported by all the browsers. In this regard the ideal video format should:

• Be free of royalty.

• Possess good quality of compression, good quality of images and have low decoding processor usage.

• Have hardware video decoder along with software decoder because many of the processors which are embedded do not possess the performance level for video decoding.

So using this simple HTML5 tag in your web page you can make it much more interactive for your audience and raise their interest level.