Adding an HTML5 video player

One of the major new features of HTML5, and one of the most remarkable, is the video tag.

The <video> element, cousin of <audio> (more details here), offers a simple, browser-native solution in HTML5 for embedding a video in a web page. It also provides an alternative to using Flash for platforms that do not support it (iOS for example, with iPhone, iPod, iPad…). Adobe Flash has indeed been permanently removed from web browsers.

General syntax

The basic syntax of the video tag is extremely simple:

<video controls src="video.ogv">Voici la description alternative</video>

The src attribute defines the address of the video file, just like the img tag for images. If you specify dimensions with the height and width attributes, even better, and if all goes well, an element should appear in the browser… provided it supports the video format specified in the source.

Multiple sources

You can also provide multiple sources in different formats by specifying MIME types using the type attribute:

<video width="400" height="222" controls="controls">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <source src="video.ogv" type="video/ogg" />
  Here the video fallback: a download link, a message, etc.
</video>

Browsers that cannot play MP4/H.264 or the WebM version natively (such as Firefox 3.6 for example) will fall back to the Ogg Theora version. This does require you to encode the file with different codecs. XHTML syntax note: you must add controls="controls" (not just controls as you will see in the first example) to display the video controls. This applies to all attributes (autoplay, etc.).

Attributes

The controls attribute provides access to playback controls (navigation buttons, volume, etc., depending on the browser capabilities), or hides them if omitted.

The preload="auto" attribute tells the browser to start downloading the video immediately, anticipating that the user will play it. Be careful, this option should be used with caution (preferably only when the page’s sole purpose is the video). Note: this is the former autobuffer attribute that you will need to keep for Firefox 3.5 and 3.6.

The autoplay="true" attribute, as its name suggests, starts playback automatically. This can also be problematic on low-bandwidth connections or mobile devices. As a general rule, avoid imposing your choices on users… and their internet connection.

The poster="image.jpg" attribute specifies an image to display by default in the space reserved for the video, before playback begins.

The loop attribute indicates that playback should loop continuously.

Prerequisites

Also remember to specify MIME types in an .htaccess file to make sure they are correct. The following three lines are enough to ensure everything works smoothly:

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

Formats

Several formats are at the forefront: WebM, MP4, and Ogg Theora. Although the purpose of this tutorial is to provide a solution for integrating the video tag that is compatible across as many browsers as possible (and not to discuss format choices in an endless debate), let’s do a quick overview.

H.264/MP4

H.264 is supported by the Moving Picture Experts Group. It is a non-free (patent-encumbered) and non-gratuitous format. However, it is free for certain uses (such as free video distribution by websites).

Learn more: H.264 on Wikipedia.

MP4 files using H.264 are natively playable on Apple browsers (Safari, Safari Mobile), Opera, Google Chrome, and Firefox since version 34.

OGG/Theora

Theora is an open-source, patent-free video compression format. This gives everyone the right to use Theora (for both non-commercial and commercial purposes) without having to pay royalties to the MPEG consortium.

Learn more: Theora on Wikipedia.

OGG/Theora is playable on Firefox, Opera, and Google Chrome.

WebM/VP8

WebM is an open multimedia format launched by Google (after acquiring On2 Technologies). Its use is free and open.

Learn more: WebM on Wikipedia.

As you can see, there is some disparity in codec support, with each party defending their interests for better or worse (commercial or open-source).

For more details on browser support:

• H.264 support on CanIUse
• WebM support on CanIUse
• Ogg Theora support on CanIUse

Generating and converting files

Several software tools allow you to generate MP4, WebM, and OGV files. The simplest and most practical in my opinion is Miro Video Converter (which also has the considerable advantage of being free and open-source). It handles all formats (MP4, WebM, and Ogg). Wtheora (based on FFMpeg) will allow you to generate Ogg files while being able to fine-tune their quality.

An example

Here is a first example. Note that we put the MP4 version first to ensure that iPhone, iPad, and other iPods can play it (they only play the MP4 version, and it must be offered first for it to work).

<video width="400" height="222" controls="controls">
  <source src="animations/editeur_texte.mp4" type="video/mp4" />
  <source src="animations/editeur_texte.webm" type="video/webm" />
  <source src="animations/editeur_texte.theora.ogv" type="video/ogg" />
  Vous n'avez pas de navigateur moderne, donc pas de balise video HTML5 !
</video>

The idea of this example is to allow the greatest number of modern browsers to view the video, so we offer all three formats (MP4, WebM, and Ogg).

We will also use the Flash version of this same video, so that very old versions of Internet Explorer can play it. For this example, we chose to embed the YouTube player for this video.

<video width="400" height="222" controls="controls">
 <source src="animations/editeur_texte.mp4" type="video/mp4" />
 <source src="animations/editeur_texte.webm" type="video/webm" />
 <source src="animations/editeur_texte.theora.ogv" type="video/ogg" />
 <object type="application/x-shockwave-flash" width="400" height="222" data="http://www.youtube.com/v/ZwAevyFedeY">
  <param name="movie" value="http://www.youtube.com/v/ZwAevyFedeY" />
  <param name="wmode" value="transparent" />
  You don't have a modern browser or Flash installed...
 </object>
</video>

The object tag is perfectly valid… however, Internet Explorer 6 and below will not understand this beautiful standard and valid code. To keep valid code while still satisfying IE6, you will need to use the embed tag (which is absolutely not standard in the HTML4/XHTML1.0 specification). By using conditional comments to hide this non-standard piece of code (except from IE6 and below), we get this:

<video width="400" height="222" controls="controls">
 <source src="animations/editeur_texte.mp4" type="video/mp4" />
 <source src="animations/editeur_texte.webm" type="video/webm" />
 <source src="animations/editeur_texte.theora.ogv" type="video/ogg" />
 <object type="application/x-shockwave-flash" width="400" height="222" data="http://www.youtube.com/v/ZwAevyFedeY">
  <param name="movie" value="http://www.youtube.com/v/ZwAevyFedeY" />
  <param name="wmode" value="transparent" />
 
  <!--[if lte IE 6 ]>
   <embed src="http://www.youtube.com/v/ZwAevyFedeY" type="application/x-shockwave-flash"  allowscriptaccess="always" allowfullscreen="true" width="400" height="222">
   </embed>
  <![endif]-->
  You don't have a modern browser or Flash installed... follow the links below to download the videos.
 </object>
</video>

A good habit to adopt is to offer a download link for your video files (so users can play them locally), and while you are at it, specify the file sizes.

In the end, all major browsers can play this video, with the most modern ones able to play it natively via the video tag, which can also be styled via CSS… like any HTML element, and controlled with JavaScript. The downside, of course, is having to provide the different adapted formats.

Conclusion

As you have seen, using the video tag is very simple. Generating files in various formats is quick and easy, the solution is standards-compliant (yes, it passes validators!) and rather elegant.