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 but supports this format via CISCO.
VP9, successor ot VP8, is supported by all browsers.

New codecs:

H.265 or HEVC was a possible successor to H.264, but the legal complexities make it unusable en masse.
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 with the help of Mozilla to be superior to H.265 and therefore much more efficient than H.264. Totally royalty-free like Opus and Theora is is not standard but is the basis of AV1.
AV1 is the latest codec in date, free of patents. It divides the size of a file by 2 compared to H.264, but the encoding takes 9200 times more time. Even if it can be accelerated a hundred times, it will still be 90 times slower and with limited use.

The following types of containers for video files can be used:

WebM with for VP8 et VP9 codec.
MPEG 4 with the .mp4 extension.
Ogg with the .ogg extension, for Theora.
AVI with the .avi extension.
Matroska with the .mkv extension. Standard and free container for all codecs.

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

Tools

Video.js. JavaScript code to customize the player based on the video tag.
HTML5media. JavaScript code that adds the support of the <video> tag to browser that does not have (like IE8).
Seriously. You wonder how filmmakers are able to transpose characters in fantastic scenery. This is the technique of green background, you can use it yourself in HTML 5 and Node.js with this code.

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.
State of the video. Video support by browsers in January 2012.