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:

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

Tools

References and more

© 2009-2013 Xul.fr