| Comments

If you aren’t aware of the Silverlight Media Framework, you should take a look.  This is a media playback framework for Silverlight that is based off of a lot of best practices from such implementations as the NBC Olympics, Sunday Night Football and others. 

Silverlight Media Framework screenshot

It has a lot of features built-in to the framework such as:

  • Logging
  • DVR-style features
  • Fast forward
  • Slow motion
  • Media Markers
  • etc

Basic stuff plus some great included features and extensibility points.

Missing Features – Part 1

What I didn’t like in v1 was two things: it was only for Smooth Streaming and it was a framework versus just a XAP I could use in a web application.  After some successful complaining :-) and an opportunity to get into a milestone build, the progressive download feature was added which enabled non-Smooth Streaming people to use it.

I’m wanting to standardize on what our teams are providing for best practices, so I’ve started using this player. 

NOTE: Does SL Video Player still live?  Yes, and it has VERY basic features.  It is super small and simple, but may not be for everyone’s liking.

So I started to solve the other problem, primarily for my use, of having essentially a stand-alone player using this framework. 

Extending the Silverlight Media Framework

You see, the SMF itself is essentially a set of controls…but not an ‘app’ itself that you can just consume the binary.  What I did was basically create a new Silverlight application myself with one simple element: Player.  This way I could implement what I needed for my use.  The first thing I wanted was to have a simple XAP that I’d be able to load parameters in…very much like we did for SL Video Player on codeplex.  To make essentially the player have a flexible use model.  I could host the player anywhere and just feed it media to play.

I used the InitParams feature of the Silverlight plugin model to enable me to pass in parameters to the application.  I wanted a simple parameter ‘media’ that basically was a URI to my media.  For most of my needs this would be a progressive download situation.  I added the simple feature using InitParams, and passed that URI to the MediaElement of the player framework.  All was well.

Missing Features – Part 2

I then realized two features that I love about the Expression Encoder templates: AutoLoad and ThumbnailImage.  These two features are pretty much essential for a bandwidth saving playback experience.  AutoLoad basically disables the media from starting to be fetched until the user clicks play.  The ThumbnailImage enables a static screenshot view to be displayed until a media frame could be captured.  These two features work well together.

The AutoLoad (cueing) was critical for me.  I didn’t want media to start downloading until the user said so.  This saves me bandwidth as well as doesn’t annoy the user if there is a ton of media on one page (which might not be a good UX to begin with, but I digress).

I saw an event PlayControlClicked in the framework that I felt I could tap into.  I figured I’d just wire up to that event and set the MediaElement.Source when the user clicked that.  FAIL.  The problem was that the play control in the current framework isn’t even enabled until the media source is set.  This defeated my whole purpose.

After some spelunking in the source – did I mention that SMF is Open Source? – I found the culprit functions.  Disabling them made everything work but it just didn’t feel right.  Luckily one of the developers of the framework, Kevin from Vertigo, and I start chatting (virtually of course, after all nobody ‘talks’ anymore for real right?).  I told him of my findings and hacks and he educated me that I didn’t even need to mess with the source, but could accomplish my needs by subclassing the Player.  Kevin sent me some sample code for what he called a DeferredSource, which is what I wanted.

After some quick tests, I realized that I should keep all scenarios enabled:

  • Deferred loading (AutoLoad=false)
  • Normal progressive playback (AutoLoad=true)
  • Windows Streaming
  • IIS Smooth Streaming

I modified Kevin’s source a bit and got everything working.  Now I have 3 parameters:

  • media – the URI of the stream, IIS Smooth Streaming manifest, or media file for progressive download
  • autoload – used really only for progressive download, would enable/disable cueing of the video upon load
  • ss – to specify if the URI indicated in ‘media’ is an IIS Smooth Streaming implementation

With this done I can now do something as simple as:

   1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="320" height="240">
   2:   <param name="source" value="/ClientBin/SmfSimplePlayer.xap"/>
   3:   <param name="background" value="white" />
   4:   <param name="minRuntimeVersion" value="3.0.40818.0" />
   5:   <param name="initParams" value="media=URL_TO_YOUR_VIDEO" />
   6:   <param name="autoUpgrade" value="true" />
   7:   <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
   8:           <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
   9:   </a>
  10: </object>

Boom, done.  Now I had a player based on SMF that served my needs.

Wishlist

I still didn’t implement the ThumbnailImage in my player.  This is a wishlist item for me…it isn’t critical but nice for when AutoLoad=false so it isn’t just a blank screen!  Additionally, the one thing I have to admit I’m not wild about is the overall size.  The compiled XAP is 230K.  In contrast my SL Video Player is 16K.  Why the big size?  Well, the SMF today is intended for someone who really wants to implement all the features it provides, including Smooth Streaming.  If you aren’t using Smooth Streaming, then you still have those dependencies with you…not ideal.

In talking with the dev team and framework team, I know their plans for updated milestones of SMF and am pleased with the roadmap.  They have taken a lot of feedback of how mainstream uses might be implemented and will make it continue to be awesome with a bit more flexibility of taking what you need!

Summary

If you need a solid, basic player take a look at SMF.  There are other players out there of course, but this one is based on proven best practices in the toughest situations.  And it is only getting better.  There is a lot of room for improvement for the ‘YouTube’ style simplicity of playback for medium-low quality video playback for your personal sites showing home movies, etc. – and I know that scenario will improve, because I’m pushing for it as well.

If you want to use what I’ve done here, feel free – here are the files:

There are also a bunch of videos for working with the Silverlight Media Framework beyond the basics.  Be sure to check them out!

Hope this helps!



This work is licensed under a Creative Commons Attribution By license.

| Comments

well, you've seen the flurry of no doubt (at least if you are a regular subscriber to things silverlight).  i'm not here to say "go check it out" and add another post to the flurry, but instead to perhaps look at why is important.

you see, when i look at the site, i think it is cool, interesting, unique, <insert-favorite-word-here>.  but at the same time i'm a little opinionated about the ui design choice.  i should be clear that i'm no professional designer at all, and all of this is my opinion of course.  but i look at the home page of tafiti and i see a lot of things going on and elements that i'm not sure interact with each other.  there seems to be a theme of some type of desk/drawer.  maybe i'm just not a fan of woodgrain :-).  now because my mom is a librarian and i grew up singing family songs about the dewey decimal system (ah, good times), i can visually see that this drawer emulates a card catalog box (hence the single hole punch in the search box area), but are those elements matched with the other experiences?  i feel like i'm looking at a card catalog sitting in an ocean scene.

perhaps i'm being too picky (and i'm sure i am).  but one of the most unique features of tafiti is not being demonstrated in the user's face enough IMO and maybe should be a default view given this experimental project.  that's the tree view i'm speaking of.  what?!  you haven't seen it?  do a search and then in the top there is a link to "tree view" -- click it now.

and there in lies the importance to me of tafiti.  a different experience on search.  you see, the default search results are just that -- default.  they give me a header and some initial text sorted (apparently in relevant order).

SIDENOTE: when i do a search in tafiti that is powered by live search (i thought) the search results are different then when i go to live.com.  hmmm...

here's where i think rich internet applications (beyond rich media experiences) have a real opportunity to excel...different visualizations of data.  why is that important?  well, i'll take it from my perspective as not to assume i speak for the rest of the human race.  for me, tafiti is good and there are some demonstrations of the platform of silverlight, etc. -- but for me at the end, it still is search.  until you see the tree view.  here's a look:

you see the tree view "grows" a tree out of the results (i'm still trying to understand the sort order, but for this purposes this is irrelevant).  each branch becomes a result and sways in the wind in front of you.  one could argue (i'll be that one) that this might not be the best demonstration of this visualization (because you want to see relevant data in searches displayed more prominently), but the point is that it is a different twist on an existing problem domain.  i find myself going back and playing with the tree view for the silverlight aspects, but also to see if it does make some sense from a presentation sense for the results...either way it has kept me engaged on something that is old hat: search.   and to me, that's where rich internet applications can excel.

let's take another example using this same paradigm, family trees.  i'm huge into genealogy.  i've researched my family as far back as i can take it without digging out old documents in libraries that i don't have access too.  my tool of organization for this has historically been personal ancestry file (affectionately referred to as PAF).  for the most part, PAF is an excellent tool and gets the job done.  pedigree charts can be rendered just like any other pedigree chart in every other online/offline application.  then came mix07 and my friend scott stanfield and his team at vertigo.  what did they do?  they took a different look at an existing problem domain.  the result?  family.show.  you see, they didn't re-invent genealogy nor the pedigree concept, but the provide me a new visualization of the information...keeping me engaged and wanting more as a user.  take a look:

they are showing my family tree as real people, not flowchart lines.  oh, and they give me instant clues as to what i'm looking at: the star is me, the line connecting my wife, the fact that we have children, my sister and the fact she has children.  oh, and bill, my half brother -- they even provide a view on that challenge of representing multiple lineages that intersect.  (note: i don't have a half brother, but added that here to show a point.)  another cool feature vertigo added was the timeline snap.  curious what the family tree looked like years before?  move the timeline:

notice the grayed out areas -- they aren't gone, but filter out in the background showing what the pedigree looked like at any given time.  sweet.  family.show has provided a new experience on an existing problem domain.  and in doing so has made it a rich experience, an engaging one, and one that gets me excited again about the topic.

so what's my point?  who knows really :-) -- in a nutshell it is bravo vertigo and tafiti, for providing some unique differences on existing scenarios.  thanks for helping me understand that "rich internet application" doesn't have to always mean "new idea" all the time.