Formats for Browsers

The simple video format is not supported in all the browsers while using Html 5. 

See the list of browsers and formats to be used below:

MP4 (H.264 & AAC): safari 3.0+, Chrome 5.0-, iOS 3.0+, Android 2.0+, IE 9.0+

WebM: Chrome 6.0+, Android 2.3+, Firefox 4.0+, Opera 10.6+

played if plugins are installed in Safari, iOS and IE

Ogg ( Theora and Vorbis): Chrome 5.0+, Firefox 3.5+, Opera 10.5+, Safari with plugin

More Video Options for HTML 5

To add control for your video just add an attribute.

<video src= "video.mp4" controls> </video>

You can even build your own customized controls:

<video src= "video.mp4" autoplay> </video>

This will make your video to autoplay

<video src= "video.mp4" preload> </video>

This will download the video but not play it. Preload should be preferred only if the video is the sole attention of the website as this option can effect the speed of the website.

To make sure browsers do not preload the video:

<video src= "video.mp4" preload = "none"> </video>

If you want to make the video play again and again, that is play as a loop:

<video src= "video.mp4" loop> </video>

And if the video fails to load, just put posters attribute so that an image will be displayed: 

<video src= "video.mp4" poster= "alternate.jpg"> </video>

( poster attribute usually causes problems in iOS 3 version)

HTML 5 video

The video tag is similar to an html image tag:

<video src= "video.mp4"> </video>

If you need to specify dimensions for the video, add attributes as for image:

<video src= "video.mp4" width= "600" height="270"> </video>

You can also define the dimension via CSS.

Another advantage is that if the dimension given is not compatible for the browser, the browser simply centres the video within the box, so no more worry about messing.