Social Smurf: A Social Media Plugin for SMF
July 7th marked the release date of the 2nd version of the Silverlight Media Framework, aka SMF, aka the Smurf. It was such a big deal that everyone took Monday off of work and celebrated over the weekend with fireworks and BBQ’s! What? Didn’t hear about it? Busy celebrating some other holiday? Well then check it out, no it’s cool I’ll wait…
Ok, now that you’ve built your first Silverlight video player capable of handling huge online video events like SNF and the Olympics I think we can move on. So while technically this wasn’t a national holiday it was still a great day for a very cool framework. Of course I toss around words like “great” and “very cool” but admittedly I am a little biased given that I’m the project lead. Nevertheless, we’ve been getting some good feedback and I’m constantly hearing about new projects spinning up that are using SMF. Take a look at the forums, there are many smart folks building innovative video projects. One of the coolest I’ve seen recently is Nascar 3D. By the way, if you’re one of those folks who happen to post in the forums give me a shout via twitter some time. I try to reply quickly but, unfortunately I have to sleep sometimes, and I have a girlfriend, she prefers my eyes be glued to her and not the monitor sometimes J
One of my favorite new features in SMF v2 is definitely the plugin framework. SMF has a number of extensibility points you can plug into, like adding on screen UI elements, Logging, and supporting the playback of new types of media. What makes this really interesting to me is the built in ability to support downloading plugins over the network, thanks to integration with MEF. This allows developers to easily share and distribute plugins for SMF.
For a while now, I’ve had an idea of my own for a plugin that would integrate SMF with social media networks. What I want it to do is let users easily share a link to, not just the video, but the position in the video that they’re watching at that moment. Let’s take a quick look at how to do this.
Step 1. Build the Control
The control itself is pretty straight forward. It’s a horizontal StackPanel with a series of buttons, one for each network: Twitter, Facebook, LinkedIn, Delicious, and Email (not really a social network but still a cool way to share video). When the user clicks on a button, we build the URL that we’re going to share and launch a popup window that allows them to post to the network they clicked on. Each network has a different URL, I used this site to get the format needed to support each of the ones I’m using here.
Step 2. The SMF Plugin
As I mentioned, SMF supports a number of plugin types. Implementing a plugin has two parts: 1) Implement the interface and 2) Add the Export Attribute. In case you’re wondering what #2 is all about, SMF uses MEF (Managed Extensibility Framework) to discover and load plugins. A discussion of MEF is well outside of the scope of this post but it’s a very useful framework and I owe Glenn Block a public “thanks” for his guidance on using MEF to build a plugin framework.
For this example I’m implementing a Generic Plugin, which gives me a reference to the SMFPlayer instance. When my plugin gets a reference to the player I search the visual children for a Grid named PlayerRoot and add SocialSmurf to its children. To do this I need to implement the IGenericPlugin interface and add the ExportGenericPluginAttribute to my class. All SMF plugin attributes take as parameters the name, description, and version of my plugin.
Step 3. Supporting the PluginUrl InitParam and “Link To Position”
The SMF v2 release on CodePlex includes two prepackaged XAP files, one for Smooth Streaming and a smaller one that only supports Progressive Download. This allows you to easily embed the SMF player into your web site without having to write a line of code or even open Visual Studio. Instead you can configure the player using init params in your HTML file. One of my goals for this plugin was to make it as easy as possible to load into an SMF application and to do this I wanted a prepackaged XAP file that would support the loading of plugins via init params as well. Since this feature isn’t currently supported in the public version of SMF I decided to tweak the existing Smooth Streaming Player and add this feature.
Finally, I wanted to support “Link To Position”, letting users share specific positions within the video. Supporting this is pretty simple, I just check the query string for a variable named “position” and parse it the value into a TimeSpan. After that, I wait for the Player’s MediaOpened event to fire and call SeekToPosition(…) on the player setting it to the specified position.
This was pretty quick and easy, I think I had a functional prototype up and working in about an hour. The most time consuming part was, by far, doing the string parsing necessary to create the URLs that launch the different social media sites. Also, adding the position to the URL was tricky as well given edge cases, like when there are already parameters on the query string. There’s probably a better way to do this but it did the job. The SMF integration was a piece of cake, however, I must admit that I do have an unfair advantage given my hand in writing it. That said, I’d love to hear any feedback. Is this really easy to the average dev? How could something like this be made better?? Seriously, I’d love to know! Also, if you think this is a generally useful plugin let me know if you have any feature ideas.
To add this plugin to your SMF application:
Uri pluginSource = new Uri(““http://www.enginexp.com/files/socialsmurf/socialsmurf.zip””)
To include this player in your site, add the following HTML snippet:
<object data=”data:application/x-silverlight-2,” type=”application/x-silverlight-2″ width=”100%” height=”100%”>
<param name=”source” value=”http://www.enginexp.com/files/socialsmurf/pluggablesmoothstreamingplayer.zip”/>
<param name=”minRuntimeVersion” value=”4.0.50401.0″ />
<param name=”InitParams” value=”pluginurl=http://www.enginexp.com/files/socialsmurf/socialsmurf.zip,
mediaurl=[Insert Your Video Url Here]” />