Publishing Video in 2010

My nifty new Canon S90 shoots reasonable video, and it comes to mind that I’d like to video-blog from Google I/O next week. So I embarked on an HTML5 video adventure, and am here to tell the tale.

Sidebar: When I say “reasonable video”, I mean 640x480; which sounds small these days, but is more or less the resolution of an old 4×3-shaped TV show or movie on DVD. Plenty good enough for conference reportage; plus the S90’s about as small as one of those Flip cameras.

If this has worked, you should be able to summon up one minute of shamelessly self-indulgent home video. «The Duplo Auteur»

Past to the Future · Previous attempts to publish video in this space have been only moderately successful; I fought a range of problems including excessive size, browser incompatibility, and a horrid schmozzle of arcane fragile markup using <embed> and <object> and so on.

But, everyone says, we’re entering the golden era of HTML5; emit a <video> element and it should all Just Work. Not just yet, mind you, but we’re getting closer and closer. I read Mark Pilgrim’s wonderful Video on the Web and decided I just had to do it.

Sidebar: When I say “do it”, I mean wrangle <video> into my own home-grown blogging thingie, an ungodly melange of Perl, JavaScript, Ruby, and Java that was never actually designed, but sort of just spread out from a small starting footprint, sort of like shower-stall mildew.

I tell people I had to build my own blogging system so that I understood the issues, so I guess that must be why I’m doing this <video> stuff by hand. Anyhow, that’s my story and I’m sticking to it.

Diving In · I basically followed Mark’s instructions step-by-step and they all more or less Just Worked, modulo a few tweaks; for example, if you want a width other than the 320 that Mark used, the effects spill over into a few other command-line arguments.

Anyhow, as of now, I have a setup that seems to work OK on the platforms that matter.

Sidebar: When I say “platforms that matter”, I mean Firefox, Safari, and Chrome; the ones that make an effort to do <video>. Well, and Android plus the iPhone family. As for IE and (sob) Camino? Sorry guys, use a better browser.

Yes, there are a couple of different ways to get Flash running, for platforms that don’t do <video> — if I had to choose one it’d probably be Video for Everybody, but my first attempt Didn’t Just Work and while I was trying to see why, I realized that I Just Didn’t Care.

Layout · One reason why Mark presents his video 320-wide, I suspect, is that that size fits into a typically-vertical blog layout. But my camera is natively 640 wide, and there’s lots of room on the screen, and even a modern phone has room for 640x480 video. So I didn’t want to squeeze it.

So on the browser, I do a little landscape-shape popup and embed the movie there. On Android, support for <video> is a little shaky; I was researching that and realized that the phone has a built-in full-screen video player; dispatching to that is probably the moral equivalent of doing a popup on a computer screen.

So, in the blog entry I generate a dispatch like so:

<a onclick='return videoPopup("popup.html", 640, 480, "$mp4")' href='popup.html'>$title</a>

Which invokes this chunk of JavaScript:

function videoPopup(url, width, height, mp4) {
  if (navigator.userAgent.indexOf('Android') >= 0 ||
      navigator.userAgent.indexOf('iPhone') >= 0 ||
      navigator.userAgent.indexOf('iPad') >= 0 ||
      navigator.userAgent.indexOf('iPod') >= 0) ||
      navigator.userAgent.indexOf('webOS') >= 0) {
    // don't wrap it in HTML, just point it at the H.264 bits and get the full-screen
    //  video player.
    window.location = mp4;
  }
  else {
    // 640x480 should fit on most screens, but won't in my blog layout, so make a
    //  popup for the video
    width += 20;
    height += 20;
    newwindow=window.open(url,'videopopup','height=' + height + ',width=' + width);
    if (window.focus) {newwindow.focus()}
  }
  return false;
}

It works great, and I must say I got an unreasonable thrill the first time I tapped the link on my phone and hey-presto, there was my own video loading up.

Sidebar: When I say “works great”, I mean I tested it on two different Nexus Ones, appealed for help from Apple-owning friends, and was told that it worked on one iPod Touch and one iPad; subsequently I hear that it runs on a couple of Palm webOS devices too. What further testing could one possibly want?

Time and Space · Yeah, it’s a problem. This is one minute of 640x480 video. The H.264 version, encoded at quality level 0.5 (of 1.0), is 6.1M. The Ogg version, which I encoded at level 6 (of 10) because I was seeing some digital skank at level 5, is 16M. Ouch. We all must Suffer For Our Art, and so should the Internet.

What Can We Conclude? · Seems like at least some of the work going into HTML5 has been worth the effort. I continue to believe that implementors will ignore the elaborate Science-Experiment portion of the project, while continuing to crank up the multimedia support.

Sidebar: When I say “HTML5”, I mean effectively “Has <video>”. After all, the page you are now reading has a <!DOCTYPE> declaration that claims it’s XHTML 1.1, but lacks the proper XHTML default-namespace declaration, and is served as text/html. None of these seem to get in the way.

---

---

Contributions