Providing custom ‘no-Silverlight’ UI using Silverlight Streaming

When building and hosting your own Silverlight application it’s pretty simple to provide whatever custom UI you want when a user doesn’t have a required version of Silverlight installed. Refer to Tim Heuer’s article on the subject: http://timheuer.com/blog/archive/2008/03/25/creating-a-great-silverlight-deployment-experience.aspx.

When using Silverlight Streaming, however, it’s not that simple. The two methods provided for embedding your Silverlight application don’t provide a neat space to put your own HTML so you can’t easily ‘own’ the experience.  In my case I used the iFrame solution because I couldn’t get the other method to work straight away.

What I did to get around this was to download the latest Silverlight.js from here: http://code.msdn.microsoft.com/silverlightjs, and the latest JQuery from here: http://docs.jquery.com/Downloading_jQuery#Current_Release.

Reference both scripts from your web page and then add the following script:

$(document).ready(function() {

if (Silverlight.isInstalled(‘2.0.30226.2′) == true) {

showSilverlight();

}

else {

showCopy();

}

});

$(document).ready(function() {
    if (Silverlight.isInstalled('2.0.30226.2') == true) {
        showSilverlight(); // function to display the iframe & hide the default copy
    }
    else {
        showCopy(); // function to hide the iframe & show the default copy
    }
});

And that’s it!

Note: there’s a comment on the silverlight.js download page that the script links to an older version of the silverlight player. It seems to be correct but even when I updated my script file I still got the ‘older version of Silverlight’ message when using Chrome. Also I don’t know yet whether the experience works on a Mac – if anyone can let me know I’d really appreciate it!