I spent some time last night adding the iPlayer embedded media player to the iPlayer Facebook application. This means that you can now watch full length BBC programmes from inside Facebook.

A couple of people have asked me how I did it, since 3rd party embedding isn’t yet officially supported. Well the good news is that it may not be officially supported but it is still possible. It’s pretty straightforward too, and to prove it I decided to show you how to create your own page with embedded iPlayer content.

Note: I’ve only just got the player working so I haven’t yet figured out things like what happens if the content isn’t available or you are outside the UK. When I do so I’ll update this entry. The iPlayer links will also stop working due the (bad) way iPlayer is currently put together, but you can substitute the pid (the unique programme identifier, in this case b008h3dz) for another one and things will work just the same.

The Item Page
Looking at the source for an iPlayer item page, say http://www.bbc.co.uk/iplayer/page/item/b008h3dz.shtml we see the following potentially interesting line:

<!-- flash embedding -->
<script type="text/javascript" src="/iplayer/page/script/swfobject.js"></script>

and further down:

<!-- item page javascript -->
<script type="text/javascript" src="/iplayer/page/script/1.5/iplayer_info.js"></script>

If we look at the second one of these first, it contains the definition of a function called populateStreaming, which currently looks like this:

populateStreaming : function() {
    if (streamingAvailable) {
        var so = new SWFObject("http://" + iplayer.host + "/iplayer/emp/flash/iplayer-external.swf", "emp", "512", "323", "8", "#000000");
        so.addVariable("config", "http://" + iplayer.host + "/iplayer/emp/xml/config.xml");
        so.addVariable("metafile", "http://" + iplayer.host + "/iplayer/metafiles/episode/" + iplayer.pid + ".xml");
        so.addVariable("debug", iplayer.flash_debug);
        so.addParam("allowFullScreen", "true");
        so.addParam("wmode", "transparent");
        so.useExpressInstall("http://" + iplayer.host + "/iplayer/emp/flash/expressinstall.swf");
        if (so.installedVer.major == 0) { _noFlash = true; _flashError = true; }
        else if (so.installedVer.major < 7) { _upgradeFlash = true; _flashError = true; }
        else so.write("mip-flash-player");
    }
    else {
        _flashError = true;
    }
    if (_flashError) this._showFlashError();
},

From this we can see that the first script tag we found before contains some Javascript we need, so we’ll have to import that. We also see some very interesting information regarding an XML metafile…

The Episode Metafile
The metafile for the above pid can be found at http://www.bbc.co.uk/iplayer/metafiles/episode/b008h3dz.xml. It seems to be a definition loaded by the flash player of the content to be displayed. It includes information about which master brand ident (BBC One, BBC Two, CBBC, etc) to display before the programme, the available versions of the episode and a couple of related programmes. All very useful information for populating a programme page to embed the player in, although it still leaves the problem of discovering the pids (the b0008h3dz bit) in the first place. Hopefully the BBC Programmes API will help with that in the new year.

Putting It All Together
Putting all this together and making a basic page with iPlayer streaming content is pretty straightforward. It’s simply a matter of creating an html page, loading the SWFObject Javascript and copying the required bits of the populateStreaming function. As I don’t yet understand how much of the error handling is done by the player and how much is done in Javascript I’ve opted to leave in more than is probably necessary.

Simply create an HTML page that includes the following, replacing the pid as required. I do this server side when I generate the page:

<div id="mip-flash-player"></div>
<script type="text/javascript" src="http://www.bbc.co.uk/iplayer/page/script/swfobject.js"></script>
<script type="text/javascript">
    var so = new SWFObject("http://www.bbc.co.uk/iplayer/emp/flash/iplayer-external.swf", "emp", "512", "323", "8", "#000000");
     so.addVariable("config", "http://www.bbc.co.uk/iplayer/emp/xml/config.xml");
     so.addVariable("metafile", "http://www.bbc.co.uk/iplayer/metafiles/episode/b008h3dz.xml");
     so.addParam("allowFullScreen", "true");
     so.addParam("wmode", "transparent");
    so.useExpressInstall("http://www.bbc.co.uk/iplayer/emp/flash/expressinstall.swf");
     if (so.installedVer.major == 0) { _noFlash = true; _flashError = true; }
     else if (so.installedVer.major < 7) { _upgradeFlash = true; _flashError = true; } 
     else so.write("mip-flash-player");
</script>

Load the page in your favourite web browser and the embedded player should appear. Some things won’t work, like the related programmes links at the end of the video, but watching the content seems to work fine. I’ll try to update the post as I get the time to work out more about how things fit together.