Showing MPEG Videos in Silverlight (or, how to hide the Silverlight control using jQuery)

Recently I've had the very interesting opportunity to work on a project which has a Silverlight front-end and a SharePoint back-end.  Silverlight only supports the WMV format for video, so we handle WMV files natively in Silverlight.  But there was a requirement to also allow other formats (MPEG for example).  We decided to try a third-party tool called Clearbox to show MPEGs (and other file formats) using a "lightbox" approach.

Clearbox:  http://www.clearbox.hu/index_en.html
Lightbox:  http://en.wikipedia.org/wiki/Lightbox_(JavaScript)

Essentially, the solution is to pass the desired file's URL to some Javascript code from Silverlight.  But then the problem becomes, a) how do you hide the Silverlight control when you're displaying your video or image in Clearbox and b) how do you bring back the Silverlight control once the user is done viewing the video or image?

I was pleased with the trick I came up with and I thought I'd share it.

1. Call a Javascript function from Silverlight.

Assume you've got the URL of your MPEG or image file (as a string in C#); this URL (with respect to the requirements of input parameters in Clearbox), would look like something like this:

string filePath = “http://someSPSite/sites/someSPSubsite/someDocumentLibrary/SomeMPEGVideoFile.mpeg”;

You can pass parameters to ClearBox to indicate height and width, or just use the default.  Here are a couple of examples.

example 1:

// jpeg example

ScriptObject script = (ScriptObject)HtmlPage.Window.GetProperty(“clearBoxCaller”);

script.InvokeSelf(“href=” + filePath);

example 2:

// mpeg example

ScriptObject vidScript = (ScriptObject)HtmlPage.Window.GetProperty(“clearBoxCaller”);

vidScript.InvokeSelf(“width=740,height=250,href=” + filePath);

2. Install and set up ClearBox.

a) install ClearBox so clearbox.js (and the clearbox directory) are the same location as your HTML file that hosts the Silverlight control.  See the ClearBox website for more information.

b) configure ClearBox to call a function when the user closes the box.

There is a setting in cb_config.js you must set:

CB_AllowExtFunctCBClose=’on’

This will run a function called

CB_ExternalFunctionCBClose( )

when the user closes ClearBox.  This will be essential using this method I’m describing.

3.  Populate your host HTML file with certain style and script references.

a) you need a style that is used for the Silverlight control when it is visible, and another style that is used to make it invisible.  Note that I’m simply setting the height and width values to zero to make the control invisible.  Here’s what I used:

<style type="text/css">
     DIV.sl
      {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 1024px;
      height: 580px;
      margin-left: -512px;
      margin-top: -290px;
      }

      DIV.slInvisible
      {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0px;
      height: 0px;
      margin-left: -512px;
      margin-top: -290px;
      }
</style>

b) Then you need references to the jQuery library and Clearbox:

<script src="jquery-1.4.1.js" type="text/javascript"></script>
<script src="clearbox.js" type="text/javascript"></script>

c) Now you need the function calls.  Essentially all this does is to use jQuery selectors and the jQuery “addClass” method to remove the “visible” style, and replace it with the “invisible” style (and use the other function to do the reverse when the user closes ClearBox).  The first function (as indicated by its name) then calls ClearBox (using its CB_Open function) with the parameters you passed in from your Silverlight code:

<script type="text/javascript">

function clearBoxCaller(cbParms) {

$("#silverlightControlHost").removeClass('sl');
$("#silverlightControlHost").addClass('slInvisible');
CB_Open(cbParms);     

}

function CB_ExternalFunctionCBClose() {
            $("#silverlightControlHost").removeClass('slInvisible');
$("#silverlightControlHost").addClass('sl');   

}

</script>

d) finally, your Silverlight control needs to have an ID that allows it to be referenced by the scripts and styles shown above:

<div id="silverlightControlHost" class="sl">

<object data="data:application/x-silverlight," type="application/x-silverlight-2", width="100%" height="100%" id="SilverlightControl">

…

</object>

</div>

If all is done properly according to the steps above, then, voila… when you invoke the “clearBoxCaller” script from your Silverlight code, Silverlight should disappear, your Clearbox should appear and display the desired image or MPEG video, and when the user closes ClearBox, the Silverlight control will reappear exactly as it was previously. 

4. Pour yourself a cool drink and enjoy!

The Usual Disclaimers:  This code and the ideas described herein are provided without warranty of any kind and I take no responsibility for any problems you may experience.

Comments

Post a Comment

Popular posts from this blog

Parsing MSTEST results (.trx files) programmatically (in C#)

  Hello, it’s been quite awhile since I’ve posted anything; I’ve been quite busy.  I just felt like sharing this.  This is an extension of other people’s ideas, but I’ve taken it slightly further and thought it might be useful to somebody. I came across a situation where I needed to programmatically examine a .trx file for specific strings.  The .trx file was large (31MB) because it contained the output of around 5000 unit tests.  Around 800 of those tests were failed tests, and they were failing for a specific reason (which is not important now).  The point is, I wanted to programmatically examine the error messages that were being output, and do something (which is also not important now), based on certain strings that might be found in the error message of each failed test. Searching led me to this post in Rasheed’s blog , which was a great starting point for what I wanted to do.  As described in that post, first I had to: Use XSD.EXE (see MSDN here ) to generate classes bas
Read more

The description for Event ID ( 3 ) in Source ( TFSShellExt ) cannot be found.

So I’ve been on a few projects for my employer Hitachi Consulting UK .  For one of them, the client was maintaining the TFS server.  At some point I finished my work on that project and moved on to other projects.  But for some reason I couldn’t get rid of the reference to the TFS server.  Visual Studio kept trying to connect to it when I would launch Visual Studio 2010, and it was failing to connect because I was no longer authorized to hit that URL, because I’m no longer on the project.  This would lead to errors in the Windows Application log that looked like the one described in this post . I tried to clear the cache (by deleting the cache folder) as described in the aforementioned post, and also here .  But every time I tried to delete it the cache folder kept coming back.  It seems to have something to do with TFS Power Tools. In the end what solved it for me was deleting the Cache folder, running Task Manager, killing the two processes “TfsComProviderSvr.exe”, then re-bootin
Read more

Request.Browser.IsMobileDevice

It's known that the .Net framework's "Request.Browser.IsMobileDevice" is not entirely reliable in all cases as evidenced by the fact that our MVC2 site wasn't correctly detecting Android as a mobile, and as evidenced by some hits you can see in this search: http://www.bing.com/search?q=request.browser.ismobiledevice&src=IE-SearchBox&FORM=IE8SRC If we really want reliable mobile detection we need to incorporate the WURFL database (a giant XML file of every mobile device - see http://wurfl.sourceforge.net/ ) and from what I’ve seen, the preferred implementation of this for .Net appears to be “51degrees.mobi” … http://51degrees.codeplex.com/ On the MVC2 project I’ve been working on recently, I was using 51degrees.mobi in development; it seemed very effective, and you can do incredibly granular detection with it, but was a bit heavyweight for my particular project, the requirements of which were (in the case of mobile detection) simply to detect wheth
Read more