iPad & iPhone Video Poster Fix (bonus Javascript Placement Fix)

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!

New VideoJS Site (Now with more HTML5)!

I told myself when the site reached 100,000 visits I would redesign it. Well that number’s come and gone, so here it is.

I also took this as an opportunity to code an HTML5 based site, using tags like header, footer, and section. And I built it on the newly popular HTML5 Boilerplate. Actually I built a WordPress them for HTML5 Boilerplatefirst, in case you’re interested in doing the same.

I got to use some fun CSS tricks throughout as well. One of them is the thin color bar at the top of the page. Resize the window and watch it go!

I also added this blog and a twitter account, where I’ll be posting updates to VideoJS, as well as general HTML5 video news.