Servage Magazine

We already know that one video format isn’t going to cut it in the real world. At the very least, you need to make two versions of your video: Ogg Theora and MPEG-4 (H.264 video). Some developers prefer WebM instead of Ogg because browser support is nearly as good and the files are smaller. As a fallback for users with browsers that don’t support HTML5 video, you can embed a Flash player on the page or use a service like YouTube or Vimeo, in which case you let them handle the conversion, and you just copy the embed code.

In the markup, a series of source elements inside the video element point to each video file. Browsers look down the list until they find one they support and download only that version. The Flash fallback gets added with the traditional object and embed elements, so if a browser can’t make head or tails of video and source, chances are high it can play it in Flash. Finally, to ensure accessibility for all, it is highly recommended that you add some simple links to download the videos so they can be played in whatever media player is available, should all of the above fail. Without further ado, here is one (very thorough) code example for embedding video that should serve all users, including those on mobile devices. You may choose not to provide all these formats, so adapt it accordingly.

<video id="yourmovieid" width="640" height="360" poster="yourmovie_
still.jpg" controls preload="auto">
<source src="yourmovie-baseline.mp4" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'>
<source src="yourmovie.webm" type='video/webm; codecs="VP8,
vorbis"'>
<source src="yourmovie.ogv" type='video/ogg; codecs="theora,
vorbis"'>
<!--Flash fallback -->

</video>
<p>Download the Highlights Reel:</p>
<ul>
<li><a href="yourmovie.mp4">MPEG-4 format</a></li>
<li><a href="yourmovie.ogv">Ogg Theora format</a></li>
</ul>

Each source element contains the location of the media file (src) and information about its file type (type). In addition to listing the MIME type of the file container (e.g., video/ogg), it is helpful to also list the codecs that were used (see the note). This is especially important for MPEG-4 video because the H.264 codec has a number of different profiles, such as baseline (used by mobile devices), main (used by desktop Safari and IE9+), extended, and high (these two are generally not used for web video). Each profile has its own profile ID, as you see in the first source element in the example.

Technically, the order of the source elements doesn’t matter, but to compensate for a bug on early iPads, it is best to put the baseline MPEG-4 first in the list. iPads running iOS 3 won’t find it if it’s further down, and it won’t hurt any other browsers. After the source elements, an object element is used to embed a Flash player that will play the MPEG-4 video for browsers that have the Flash plug-in.

It is important to note that the Flash fallback is for browsers that do not recognize the video element. If a browser does support video but simply does not support one of the media file formats, it will not display the Flash version. It shows nothing. That’s why it is a good idea to have direct links to the video options outside the video element for maximum accessibility.

Finally, if you want the video to start playing automatically, add the autoplay attribute to the video element and autostart=true to the Flash param element like this:

<video src="movie.mp4" width="640" height="480" autoplay>
<param name="flashvars" value="autostart=true&amp;controlbar=over&amp;
image=poster.jpg&amp; file=yourmovie-main.mp4">

Keep in mind that videos will not play automatically on iOS devices, even if you set it in the code. Apple disables autoplay on its mobile devices to prevent unintended data transfer.

Resources and further reading

HTML Goodies

Long tail video