Tumbled Logic

Fun with MIME types

Okay, what if you could do this:—

<video poster="http://www.bbc.co.uk/archive/imageArchive/programmes/8001_pp.jpg">
  <source type="application/vnd.bbc.playlist+xml" href="http://www.bbc.co.uk/archive/xml/8001.xml" />
</video>

…or perhaps this…

<video poster="http://www.bbc.co.uk/iplayer/images/episode/b00rfgl2_640_360.jpg">
  <source type="application/vnd.bbc.playlist+xml" href="http://www.bbc.co.uk/iplayer/playlist/b00rfgl2" />
</video>

Well, you can. Obviously, no browser knows what the BBC EMP playlist XML format is or what to do with it, and only certain browsers understand <video> anyway, but we can make up for all of that with the aid of JavaScript. Simples!

Stick the following above it somewhere:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.bbc.co.uk/emp/swfobject.js"></script>
<script type="text/javascript" src="http://www.bbc.co.uk/emp/embed.js"></script>

And the following somewhere else:

<script type="text/javascript">/*<![CDATA[*/
function replaceVideo() {
  var v = $('video'), n = 0;
  v.each(function() {
    var v = $(this), s = v.children('source'), d = false;
    n++;
    if(!v.attr('id'))
    {
      v.attr('id', 'auto-video' + n);
    }
    v.wrap('
');
    s.each(function() {
      var s = $(this), t = s.attr('type'), u = s.attr('href');
      if(d) return;
      if(t == 'application/vnd.bbc.playlist+xml')
      {
        var emp = new bbc.Emp();
        d = true;
        emp.setDomId('auto-video-wrap' + n);
        emp.setWidth("512");  
        emp.setHeight("323");
        emp.setPlaylist(u);
        emp.write();
      }
    });
  });
}
$(document).ready(replaceVideo);
/*]]>*/</script>

Clearly, it’s not by any means perfect (we should do something sensible with the dimensions, for a start); it’s liable to break at any moment; it has no orders of preference (i.e., an EMP Playlist will always cause replacement even a natively-playable type is available); and it only handles EMP video at the moment, whereas it would be quite nice to have a single script which can deal with lots of different proprietary sources (YouTube, 4oD, Vimeo, Blip.tv, etc) alongside standard formats.

Fun five-minute experiment though.