HTML5 Video

The HTML5 draft specification introduced the video element for the purpose of playing videos or movies,^[1] partially replacing the object element. HTML5 video is intended by its creators to become the new standard way to show video on the web without plugins, but has been hampered by lack of agreement as to which video formats should be supported in web browsers.

History of <video> element

The <video> element was proposed by Opera Software in February 2007.^[2] Opera also released a preview build that was showcased the same day,^[3][4] and a manifesto that called for video to become a first-class citizen of the web.^[5]

<video> element examples

The following HTML5 code fragment will embed a WebM video into a web page.

<video src="movie.webm" poster="movie.jpg" controls>
 This is fallback content to display if the browser
 does not support the video element.
</video>

The "controls" attribute enables the browser's own user interface for controlling playback. Alternatively, playback can be controlled with JavaScript, which the web designer can use to create a custom user interface. The optional "poster" attribute specifies an image to show in the video's place before playback is started. Its purpose is to be representative of the video.

Multiple sources

Video format support varies among browsers (see below), so a web page can provide video in multiple formats. For other features, browser sniffing is used sometimes, which may be error prone: any web developer's knowledge of browsers will inevitably be incomplete or not up-to-date. The browser in question "knows best" what formats it can use. The "video" element supports fallback through specification of multiple sources. Using any number of <source> elements, as shown below, the browser will choose automatically which file to download. Alternatively, the JavaScriptcanPlayType() function can be used to achieve the same. The "type" attribute specifies the MIME type and possibly a list of codecs, which helps the browser to determine whether it can decode the file. Even with only one choice, such hints may be necessary to a browser for querying its multimedia framework for third party codecs.

<video poster="movie.jpg" controls>
 <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
 <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'>
 <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
 <p>This is fallback content</p>
</video>

Ref: http://en.wikipedia.org/wiki/HTML5_video