Videos on the Web using html5

         Until now, there has not been a standard for showing a video/movie on a web page.

Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.

HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.

   HTML5 video is an element introduced in the HTML5 draft specification for the purpose of playing videos or movies, partially replacing the object element. HTML5 video is intended by its creators to become the new standard way to show video online, but has been hampered by lack of agreement as to which video formats should be supported in the video element.

How It Works

To show a video in HTML5, this is all you need:

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

Multiple sources

            Using any number of <source> elements, as shown below, the browser will choose automatically which file to download. Alternatively, the javascript canPlay() 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 hypothetical browser for querying its multimedia framework for third party codecs. Due to lack of a common video format, multiple sources is an important feature to avoid the need for browser sniffing, which is error prone: given that any web developer's knowledge of browsers will inevitably be incomplete, the browser in question knows best.

<video width="320" height="240" controls="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 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
Firefox 4.0	NO	YES	YES
Google Chrome 6	YES	YES	YES
Apple Safari 5	YES	NO	NO
Opera 10.6	NO	YES	YES

HTML5 video Tags

Tag	Description
<video>	Defines a video or movie
<source>	Defines multiple media resources for media elements, such as <video> and <audio>
<track>	Defines text tracks in mediaplayers

Video courtesy of Big Buck Bunny.

HTML5 <video> - Methods, Properties, and Events

The table below lists the video methods, properties, and events supported by most browsers:

Methods	Properties	Events
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

Usage

      As of April 2010, in the wake of Apple iPad launch, a number of high-profile sites have started to serve H.264 HTML5 video instead of Flash for user-agents identifying as iPad.

As of May 2010, HTML5 video is not currently as widespread as Flash videos, though recent rollouts of experimental HTML5-based video players from Daily Motion(using Ogg Theora and Vorbis format), YouTube(using the H.264 and WebM formats) and Video (using the H.264 format) suggest that interest in adopting HTML5 video is increasing.

Some major video-providing websites have announced decisions to continue using technologies other than HTML5 video. According to a YouTube blog post, the <video> tag does not currently meet all the needs of a website like YouTube. The main reasons stated include the lack of a standard format, the absence of an effective and reliable means of delivering the video to the browser, JavaScript unable to display video fullscreen, and content protection issues. Hulu also has not adopted HTML5 video due to the inability of providing the user with adaptive bandwidth videos, securing the producer's content, and providing advertisers with data. Netflix stated that there are a number of issues preventing them from using HTML5 video: acceptable A/V container formats; acceptable audio and video codecs; streaming protocol; a way for the streaming protocol to adapt to available bandwidth; a way of conveying information about available streams and other parameters to the streaming player module; a way of supporting protected content; and a way of exposing all this functionality into HTML5.

On January 11, 2011, Google's Chromium Project announced on their blog that support for closed codecs (particularly H.264) would be removed from future releases of Chrome. The Chromium announcement specifically mentioned that this removal was an effort to increase the use of license-free HTML5 and the <video> tag, driving web-wide adoption of the open-source codecs VP8 and Theora. On February 2, 2011 Microsoft released the Windows Media Player HTML5 Extension for Chrome which added the ability to use the licensed H.264 player included with Windows to play back H.264 media content using Chrome

A number of advanced HTML5 video players and larger solutions have appeared. SublimeVideo Player was the first to demo how a custom player could provide a better viewing experience than the browser's native player, introducing features a unified player across all devices, flash fallback for older and incompatible devices and true HTML5 fullscreen video. Other popular choices include JW Player and Video JS.