Video tag in HTML 5

The video tag displays a video from a container file, which can also include sound. It is a powerful element with attributes to define the way it works and appearance.

But currently it does not allow full screen and does not offer all the features of the Flash reader.

Tag and attributes

The video tag is recognized by Firefox, Chrome, Safari, IE9 or IE with the Google chrome frame plugin.

<video src="theurl" width="600" height="400" />

Or with the source tag:

<video><source src="theurl"></video>

A custom control panel can be added with a layer:

<div class="video">
    <video></video>
    <div class="panel"></div>
</div>

The webmaster can sets the appearance of the control bar with a style sheet and control the process with JavaScript.

src	The URL of the video container.
width, height	The dimensions of the image.
poster	The URL of an image to display instead of the video until it is available. We can use a frame from the video.
videoHigh, VideoHeight	These are the original dimensions of the image. Read-only attributes that are accessed in Javascript, to provide information on the video.
autobuffer	Is true or false, the true value triggers the loading of video into memory along with the page, an option choosen when it is supposed the video to be always displayed.
autoplay	Is true or false, the true value starts the video when the page loads.
loop	Is true or false, the true value display the video in a loop.
controls	Is true or false, the true value indicates that the control bar appears by default, otherwise the site sets its own bar.

Ensuring compatibility

The page must switch to the Flash reader when the browser does not support HTML 5.

To do this you can place the code of the Flash player in the content of the tag: This code is ignored on recent browser is contrary to the oldest, it is the start tags <video> and closing tag </video>, which are ignored. As the <source> tag.
Example:

<video controls>
<source src="myvideo.ogg" type="video/ogg"/>
<source src="myvideo.mp4" type="video/mp4"/>
<object src="http://blip.tv/play/AYGLzBmU8hw"
  type="application/x-shockwave-flash"
  width="500" height="396"
  allowscriptaccess="always"
  allowfullscreen="true"/>
</video>

Compatibility with any browser may also be added by the code provided by html5media.
You can download the MIT licensed scripts and put the code on your site to not depend on an external website.

Codecs and container files

A codec is the algorithm for COmpressing and DECompressing a video (or COding and DECoding).

The HTML 5 specification does not provide specific video codec due to lack of agreement on which technology to use. But browsers recognize different codecs:

VP8 from Google. Open source it is in the same line as H.264.
MPEG 4 is a standard with different implementations. Among these, Xvid is open source but this does not preclude the existence of patents on the codec.
H.264 is a version of MPEG 4 for limited devices and provides high compression for reduced quality. It is used by Youtube for HD and Blu-Ray.
Mozilla does not want to buy a $5 millions annual license to this format of which Apple and Microsoft are licensors and so does not support this format.
Theora is free and open source. It does not support hardware acceleration like H.264.
Opus. Royalty-free codec to replace H.264.
Dalaa. Codec being defined by Xiph and Mozilla to be superior to H.265 and therefore much more efficient than H.264. Totally royalty-free like Opus and Theora.

The following types of containers for the video file can be used:

WebM with the VP8 codec.
MPEG 4 with the .mp4 extension.
Ogg with the .ogg extension, for Theora.
AVI with the .avi extension.
Flash video with the .flv extension.

Codecs for the video tag.
Ogg, WebM, H.264, useful tools to use them in a browser.

Tools

Flarevideo. Open source player based on the video tag. You can change the theme.
Video.js. JavaScript code to customize the player based on the video tag.
HTML5video. JavaScript code that adds the support of the <video> tag to browser that does not have (like IE8).

References and more

HTML 5 video. Specification by the W3C.
Brief history of video compression. Describes the evolution of techniques in the field of video compression.
Sublime video reader. Works with Chrome 4, shows some advantages over Flash: you can go immediately to any part of the video.
Rainbow. A Firefox plugin to make audio or video recording from the browser.
State of the video. Video support by browsers in January 2012.