Three and a half years ago I wrote The Joy of Web Development about the trouble I had embedding movies into webpages. That article is about the most popular article (for spammers :-) on this sparse blog. Now, as I’m gearing up to redo my site and take the movie pages out of self-written CMS limbo and into the 21st century (cough WordPress), I decided to revisit the way I want to publish movies and see what’s going on.

First, publishing movies on one’s own website is out. Youtube and Vimeo rule the pack, and if you’re looking for an easy way to put your family’s vacation movie online you can stop reading now and head their way. However, I’m not interested in putting my movies on someone else’s servers, partly because I’m stubborn, and partly because I don’t like my movies served with advertising.

Coincidentally, Mark Pilgrim published his Gentle Introduction to Video Encoding just about now, so head that way if you’re looking for a concise overview. These are just my observations:

  1. mp4 has won. Back in 2005 when I wrote The Joy of Web Development, the battle was between .mp4 (only playable by Quicktime back then) and Windows Media (.wmv). This old page still kind of acknowledges that battle. Flash video (.flv) was and is a strong contender but the good On2 VP6 codec is expensive and kind of hard to get.1 Plus, flash video does not integrate nicely into a Quicktime based workflow and .flv-files are basically unplayable once downloaded.

    The ubuquitous availability of iPod’s, PSP’s and other MP4-capable portable media players helped a lot, but the final nail in .wmv‘s (and .flv‘s) coffin was the decision of Adobe to put mp4 playback into Flash Player. Early versions of the mp4-capable Flash Player were too slow but as of Flash Player 10 the performance is sufficient for most computers, although Quicktime still is much faster on my old PowerMac G4.

    Bottom line: if you want to compress your movie for the web, choose .mp4 with h.264-compression and check wether it plays in Quicktime Player.2

  2. Flash has won. This may look like a contradiction with the previous observation but as an embedded player in a website, Flash technology is unbeatable (see Youtube and Vimeo and countless others). Flash has the 90%+ install base, it loads fast, is cross platform (Windows, Mac OS X and Linux) and there’s a really nice free movieplayer3 in the form of Jeroen Wijering’s JW FLV Player.

  3. Embedding movies has become even more horrible. Due to blatant patent abuse by Eolas, Internet Explorer ceased playing flash applications (and other <object>‘s) in a webpage from february 2006 until april 2008. Users had to click to activate the embedded object, but only if it was embedded directly in the page, not if the player object was programmatically inserted via JavaScript.

    This means that from then on, the best way to insert a movie is to do it by JavaScript, preferably by using something like swfobject. Luckily, swfobject hides the <object> and <embed>-mess (still not solved!) that was the source of my troubles in The Joy of Web Development. But not so luckily, swfobject brings another dependency to the table: now your viewers must not only have the right version of flash but JavaScript needs to be enabled too, and you must test for both.

    Thus, we’ve gone from this mess:

    <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
 CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"
 HEIGHT=yy
 WIDTH=xx>
  <PARAM NAME="src" VALUE="MyMovie.mov" />
  <EMBED SRC="MyMovie.mov"
   HEIGHT=yy WIDTH=xx
   TYPE="video/quicktime"
   PLUGINSPAGE="http://www.apple.com/quicktime/download/" />
</OBJECT>

    to this

    <html>
  <head>
    <title>My movie</title>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
    swfobject.embedSWF("jwplayer.swf", "myMovieID", 512, 288 + 16, "9.0.98", false,
                       { file: "mymovie.mp4", image: "mymovie.jpg" },
                       { allowfullscreen: true });
    </script>
  </head>
  <body>
    <div id="myMovieID">
      <p>Please enable JavaScript to view my movie</p>
    </div>
  </body>
</html>

    All of your movies need placeholders in the body and the actual movie files in the header of the page and you need id‘s to keep them all apart.4

So, what’s a man got to do? I’m not going to implement that mess in item #3. Besides, posting a video online is simple in principle: all you need is a movie file (the .mp4) and a poster file; an image that describes your movie and serves as placeholder while your viewer waits for the movie to download. So here’s what’s my markup is going to look like:

<a href="mymovie.mp4"><img src="mymovie.jpg" width="512" height="288" 
   alt="Click to download my movie" /></a>

Other than that, I’ll use even more JavaScript — jQuery to the rescue — to pull out all of these .mp4-links, invent ids for swfobject and display the movie with JW FLV Player (and some more)…

  1. The bad old Sorenson 3 based flv codec is widely available but gives horrible results. ↑
  2. I believe Quicktime is the lowest common denominator of all mp4 capable apps and players, i.e. if an mp4 plays in Quicktime it will play everywhere else. Please correct me if I’m wrong. ↑
  3. JW FLV Player is free as in beer for strict non-commercial use only. ↑
  4. I know you can still do static publishing but this is the recommended swfobject way. Besides, conditional html comments are evil. ↑