Bug #1 - Poster Attribute

If you include the poster attribute on the video tag when you’re using <source> tags, the video won’t work on iPads & iPhones using iOS 3. You’ll see a broken play button, or no play button at all. On the iPad specifically, playback in inconsistent. Sometimes it’ll work and sometimes it won’t. This is documented on the Video for Everybody site.

Bug #2 - Javascript in the Head

This is a fun one… If you include Javascript in the head of your page, it’ll break playback on the iPad (also inconsistent). If you move the Javascript to the bottom of the page, and still include a stylesheet, the iPad will work, but the iPhone 3 won’t. I first read about this in a post on the No.inc blog, and then ran into it myself when redesigning the VideoJS site. Their original solution was to put the JS at the bottom of the page for iPads only (fun).

Apple’s iOS4 seems to fix both of these problems on the iPhone, but until iOS4 is available on the iPad, and everyone in the world upgrades their devices, we have to deal with this.

Fix for iOS 3

The problem seems to be some kind of race condition, that trips up the devices. The solution that has fixed both of these for me is to add the playable source directly to the video tag, and tell the video to load (all through Javascript).

I’ve added all this to VideoJS 1.1.2, but here’s the basics of how it works.

var video = document.getElementById("your_video");
var children = video.children;
for (var i=0,j=children.length; i<j; i++) {
  if (children[i].tagName.toUpperCase() == "SOURCE") {
    var canPlay = video.canPlayType(children[i].type);
    if(canPlay == "probably" || canPlay == "maybe") {
      video.src = children[i].src;
      video.load();
      break; // or return or whatever
    }
  }
}

So loop through the source elements, find the one that’s compatible, and add that source to the video src. Then trigger the video’s load() function.

That seems to fix both issues. This will not make the poster show up in either device.It just makes makes the video playable. Sometimes you’ll see it flash the controls and then go back to the big play button.

Any feedback is appreciated.

Let’s go Apple, get iOS4 out to everybody!