Or rather, how I made it work. This blog post is a response to the lack of a comprehensive overview of the do’s and dont’s of HTML5 video. Also explains how to make the video autoplay across all devices (also the default Android Browser)

First things first, video codec and container. To make sure your video’s work across all devices and browsers, you need multiple container formats and encodings. These are the ones available:

.mp4/.m4v (h.264 codec)
.webm (VP8 codec)
.ogv (theora codec)

You can forget about the last one though, support for .webm is the same as for .ogv, but the video quality of .webm is way ahead of the .ogv format.

You can encode your .mp4 videos with the h.264 codec using Adobe Media Encoder. To encode you .webm videos, you can use Miro Video Converter.

<video autobuffer preload width=”555” height=”330” poster=”images/poster.jpg” controls>

<source src=”video/videofile.mp4”>

<source src=”video/videofile.webm” type=’video/webm; codecs=”vp8, vorbis”’>

</video>

Specifying a (mime)type and the used codecs is good practice, though according to an article on broken-links.com it breaks the playback on some android devices. Omitting a mimetype on the first source tag can fix this.

Since HTML5 is new (well, not really) some hosts don’t recognize the files that are supported by the browser. To fix this, you can add the mimetypes manually to a .htacces file or directly in a Virtual Host file (). To do this, you use the AddType command:

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

To make the videos autoplay (if you want ;) ) we use javascript:

var video = document.getElementById(‘video’);
video.load();
setTimeout(function() { video.play(); }, 500);

Just call the load() and play() functions of the video element. I’m not ready sure wether the setTimeout is needed, but it seemed to make the video run better on some devices.

At this point, I still had trouble getting the video to play in the default Android Browser for Android. To fix this, I detect wether the user uses the default Android Browser and when they do I set the src attribute of the video tag to the value of the first source tag like this:

var video = document.getElementById(‘video’);
video.src = video.firstElementChild.src;

This seemed to fix the issue. Probably, the default Android Browser has some trouble with the load() function, though I’m not sure about that.

I’ve been able to test this solution on the following devices:

iPhone4S (iOs)
iPad2 (iOs)
Asus transformer (android 4.0)
Galaxy S+ (android 2.2, have to check this one)
Nokia Lumia (WP7.5)

Comments are welcome! Comment here, or leave a tweet @peeke91.