| Comments

Yesterday (7-Jul-2010), the Silverlight Media Framework v2 was released on Codeplex (yeah, it’s Open Source).  If you aren’t familiar with it, it is a Silverlight framework encapsulating the best practices for media playback for Silverlight applications.  It is both a framework and, in v2, they also provided compiled simple player XAPs that you can just drop in HTML.  If you are building apps, you’ll want to take a look at the framework in more detail, but if you want a solid media player experience grab the players too.

Since I use Windows Live Writer as my blogging tool, I wanted to share my workflow for embedding videos into blog posts (or other content that I can author using Live Writer).  First, grab the necessary tools:

Install the Dynamic Template add-in for Writer.  Next step is to put your ProgressiveDownloadPlayer.xap somewhere.  This doesn’t matter, as along as you know the URL to it.  I keep mine on my cloud storage share since I can re-use it in various places.  Once all those pieces are in place here is what I do.

Step 1 – Create the Dynamic Template

In order to create a template, you have to execute the Insert function for Dynamic Template to bring up the dialog.  Once there, choose to Edit Templates and give it a name.

Dynamic Template insert dialog

Then in the template code, copy this HTML:

   1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="640" height="480">
   2:   <param name="source" value="URL_TO_YOUR_PLAYER_XAP" />
   3:   <param name="background" value="white" />
   4:   <param name="enableHtmlAccess" value="true" />
   5:   <param name="minRuntimeVersion" value="4.0.50424.0" />
   6:   <param name="initParams" value="MediaUrl=<%= VideoUrl %>,AutoPlay=false,ThumbnailUrl=<%= ThumbnailUrl %>" />
   7:   <param name="autoUpgrade" value="true" />
   8:   <a href="http://go.microsoft.com/fwlink/?LinkID=149156&amp;v=4.0.50424.0" style="text-decoration:none">
   9:       <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none" />
  10:   </a>
  11: </object>

And in the settings use these in this screenshot:

Code variables

Of course, replace with the URL to your player location.  That’s it, that is your template.

Step 2 – Prepare your media

I’m assuming that you already have media to display, but if you don’t, use your favorite media encoding tool to create the media and have the URL.  Note that it doesn’t have to be an absolute URL, but just understand the paths of your web app if you plan on using a relative URL.  Personally I recommend using an absolute one always.

Also the snippet above, while not required, implements the ThumbnailUrl (thanks Kevin) parameter for the player.  You’ll need a URL to a thumbnail image for preview.

Step 3 – Execute the template

Now that you have the template, you can use it.  Rather than talk about it, here’s an embedded video (using the process) demonstrating the process :-)…

Get Microsoft Silverlight

Simple, huh? Now of course you cannot see the final result in Writer (not sure why actually but I think it has something to do with the rendering techniques they use in authoring mode (hence the white box in the vid), but you can see the end result!

Summary

Silverlight Media Framework is awesome.  Live Writer is awesome.  Awesome+Aweomse = Awesomely Awesome.  Kidding aside, if you have similar workflows to me, this should help you.  It has streamlined the content publishing process when I need it in a simple, but efficient way.

Hope this helps!

| 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

I was talking with a good friend the other day about some feedback about DataForm.  It’s great to get raw and honest feedback…that’s where you improve more than ‘it sucks’ type feedback.  One of the use cases he felt would be common with the Silverlight DataForm control (available in the Silverlight Toolkit) was the concept of confirming the delete action.  I agreed as well that confirming permanent delete actions is a common line-of-business application pattern.  It got me thinking about some things…

The Problem

DataForm is a great control.  I love it.  It will benefit many developers in the simplest applications quickly as well as some in the most complex applications with some additional configuration.  For the purposes of this demonstration, I’ll talk about the simplest scenario.  DataForm has build in controls for navigating a bound data set, as well as adding and deleting new items.  It is the deleting I’d like to concentrate on here. 

When DeleteItem is called on DataForm (via the built-in toolbar or via your own methods), it deletes the current item.  After all, that’s what you told it to do!  The problem is that the delete is fast and there is no easy “undo” method. 

The Helper

Luckily, DataForm provides a method interceptor for us: DeletingItem.  This event fires when DeleteItem is called and tells you: Hey, I’m about to delete the current item.  If you want to do anything about that, now is the time.  So there you have it…you can prevent the delete because there is a CancelEventArgs parameter passed in to cancel the remaining event.  So what would you do in DeletingItem?

Solution 1: Go modal

One thing you can do is leverage a modal dialog.  This would block the event until a modal dialog response is provided for you to investigate.  Here’s an example of what you might do in DeletingItem:

   1: private void PeopleBrowser_DeletingItem(object sender, System.ComponentModel.CancelEventArgs e)
   2: {
   3:     if (MessageBox.Show("Are you sure you want to delete this item?\nThis cannot be undone", "Delete Item", MessageBoxButton.OKCancel) == MessageBoxResult.Cancel)
   4:     {
   5:         e.Cancel = true;
   6:     }
   7: }

So what’s the problem with this one?  Nothing really.  The dialog would show, giving your user a chance to react and block the delete call until an OK is received (it cancels the event if Cancel is clicked).  But let’s look what it generates from a user experience standpoint:

confirm delete with MessageBox

Hmm, maybe there is a problem.  First, it says OK or Cancel…not really a “Yes or No” response the user is really looking for.  Second, using MessageBox will focus the dialog in the center of your window and not center of parent (or calling control).  These two things make it less ideal in my opinion.  The major positive here is twofold: it works and it’s truly modal (thus blocking the call to delete).

Solution 2: Pimp your dialog, but also your code

Silverlight is all about improving the user experience right?  Changing things around and differentiating the RIA?  So let’s use that mantra to think what we could do here.  Silverlight 3 provides a new control, ChildWindow that you could use in this instance.  It provides a modal-like experience to the end user (blocking other UI components) and gives them a focused area to provide a response.

NOTE: I’ve refactored ChildWindow into something I call “FloatableWindow” for MDI or other type interfaces.  I’ve provided my code for you to use on the .  I’ve also added a work item on the Silverlight Toolkit so if you like the idea, please vote on it!

The challenge with ChildWindow is that while it exhibits all the UI experience of a modal dialog, behind the scenes it is asynchronous.  This means that if you put a Show() call to a ChildWindow in your code, that your next line of code will run as well.

NOTE: If you think this should be changed, consider voting on the Silverlight Toolkit project for this item: ChildWindow – make it modal.

We can, however, still be creative.  Let’s explore an idea here.  We know that we have the DeletingItem event we can still tap into, so we can trigger our implemented ChildWindow like this:

   1: private void PeopleBrowser_DeletingItem(object sender, System.ComponentModel.CancelEventArgs e)
   2: {
   3:     ConfirmDialog cd = new ConfirmDialog();
   4:     cd.Show();
   5: }

The problem is that unless we cancel the event, the delete will still happen (and you can see it happen from behind the ChildWindow even…frustrating!  The ChildWindow.DialogResult is essentially worthless to us right now.  Let’s think creatively though.  What I did was create a member variable called _delete and set it to false.  This tells the DeletingItem event whether or not it really should delete.  It sounds dumb, I know, but work with me.

Now when we call DeletingItem, we check to see if we really should delete or not (really we check to see if we should cancel the event).  If we are still in “false” mode, then we shouldn’t delete but should show our confirmation window and cancel the DeletingItem event.  That’s great, but we still need to get the user response from the window!  We then need to tap into the ChildWindow.Closed event and get the DialogResult from there.  In the Closed event we can see if they confirmed the delete.  If they cancelled the delete, we do nothing further.  If they said “Yes” then we need to change our _delete variable and call DeleteItem on our DataForm again.  Now our DeletingItem handler knows we can successfully continue.

Sound fuzzy?  Sound like a hack?  Maybe so, but it works.  This gives us the opportunity to create a customized user experience for the confirmation.  Now I’m a crappy designer, but to make the point clear to differntiate from simple MessageBox, my ChildWindow has a flashing background and blurs the DataForm.  Yeah, it’s obnoxious, but that is the point for this demonstration!  Here’s the complete code for this solution:

   1: private bool _delete = false;
   2:  
   3: private void PeopleBrowser_DeletingItem(object sender, System.ComponentModel.CancelEventArgs e)
   4: {
   5:     if (!_delete)
   6:     {
   7:         Person p = PeopleBrowser.CurrentItem as Person;
   8:         ConfirmDialog cd = new ConfirmDialog();
   9:         cd.Closed += new EventHandler(cd_Closed);
  10:         cd.Title = string.Format("Delete {0} {1}?", p.FirstName, p.LastName);
  11:         BlurEffect b = new BlurEffect();
  12:         b.Radius = 10;
  13:         PeopleBrowser.Effect = b;
  14:         cd.Show();
  15:         e.Cancel = true;
  16:     }
  17:     else
  18:     {
  19:         _delete = false;
  20:     }
  21: }
  22:  
  23: void cd_Closed(object sender, EventArgs e)
  24: {
  25:     PeopleBrowser.Effect = null;
  26:     ConfirmDialog cd = sender as ConfirmDialog;
  27:     if (cd.DialogResult == true)
  28:     {
  29:         _delete = true;
  30:         PeopleBrowser.DeleteItem();
  31:     }
  32: }

You can try this out yourself here (requires Siliverlight 3): Sample confirm delete with DataForm.  Go ahead, I’ll wait. 

Obnoxious isn’t it :-).  Of course using Expression Blend to customize your own is highly recommended!

Summary

While there is no true modal dialog in Silverlight other than MessageBox (which isn’t XAML-customizable), these are two options that provide you with the opportunity to confirm your delete action within DataForm.  Hopefully these are helpful to get you to think at least and if someone has better implementations, please share them!  You can download the complete code for this sample here: ConfirmDeleteDataForm.zip

Hope this helps!

| Comments

I got enough feedback and suggestions that I figured it would be better just to put the code up on CodePlex rather than package zips on my blog :-).  Here it is: FloatableWindow project.  The latest build I have is up there which incorporates some feedback that I’ve received.

UPDATE: If you like this idea VOTE FOR IT in the Silverlight Toolkit!

Basically the ShowDialog() API operates the same way that ChildWindow.Show() does today.  No changes there, popup is used.  But when you just want some simple MDI type windows, use Show() which will not use Popup but rather add the elements as children to your root visual.  Now the key here is defining that root.  Before you show the window you’d want to do something like this:

   1: FloatableWindow fw = new FloatableWindow();
   2: fw.Width = 200;
   3: fw.Height = 200;
   4: fw.Title = "Foobar";
   5: fw.ParentLayoutRoot = this.LayoutRoot;
   6: fw.VerticalOffset = 200;
   7: fw.HorizontalOffset = 100;
   8: fw.Show();

Notice line #5 where I specify a Panel element to add it to?  That would be required.  An ArgumentNullException is thrown if it is not provided.

Thanks for the great feedback and encouragement on this refactoring.  I hope that putting it on CodePlex provides a better home for evolution and tracking issues (I know there is an animation issue now with non-modal).

| Comments

This is a public service announcement for my Flickr4Writer project.  It was recently brought to my attention that Flickr has some privacy settings that users can opt-in for in their account to protect their images.  Some users felt that my plug-in for Writer was not honoring these settings.  Truly, I didn’t know about them.  You can read the thread on the discussion lists here if you are so inclined.  For me it came down to a couple of items:

    • Flickr enables users to set a flag to prevent “blogging” of their images
    • Flickr enables users to be hidden from 3rd Party/API searches

First, a note on the “blogging” flag.  This is a setting under your Flickr account privacy tab labeled Who can blog your photos or videos?.  To me, this setting is a little misleading because the description of it actually reads:

This means that anyone who does not match at least the contact level you select will not be able to see the "Blog This" button. (Source: http://www.flickr.com/account/prefs/blogging/?from=privacy 07 NOV 2008)

This setting is clearly for the “Blog This” functionality that shows up if you are logged into Flickr as a non-anonymous user and browse photos.  There is some functionality for them to integrate directly with your blog engine to do some one-click blogging of photos and videos.  Because of the way the setting is named however, some users interpret “blogging” in the broader sense.  flickr4writer was challenged as one violating the principal of this setting.  Since the setting ONLY enables authenticated users to even blog (the setting options go from any Flickr user (non-anonymous) to your specific friends/family settings.  flickr4writer does not use any authentication, so browsing any photos has the appearance to violate this term if the plugin enables an anonymous user to browse and select photos in a tool that is build for “blogging.”  While I draw the correlation that flickr4writer is basically a shell to the web site and does not do anything different than an anonymous user being able to browse and grab an image URL, it is the essence of the rule that I was alleged to violate.  One challenge here is also that the API is poorly designed in this regard because the “canblog” setting is returned only at the photo level even though it is an uber setting for the user’s account.  I think it should be a filter param of the photos.search API call.

The second setting about 3rd Party/API blocking from searches gets even more interesting.  First, this totally makes sense.  Again, it was a setting I wasn’t aware of.  You can change your setting under a section titled Hide your photostream from searches on 3rd party sites that use the API?  Great.  You’d think that once a user selected this setting that any search would filter out their photos/vidoes at the API level right?  Wrong.  flickr4writer uses photos.search calls to query data (actually technically the library that Flickr4Writer uses does).  Again, by definition of this API, only public searchable photos will be returned.  UNLESS you specify a user name.  What?!?!  Yes, that’s right…if you specifc a user name, their results will come back in the API call.  Read that again.  If you specify a user name in flickr.photos.search it will not honor the user’s privacy setting.  So this sucks for me as an API developer/consumer who wants to honor those settings.

So on to the resolutions.  First, I added authentication.  flickr4writer now requires you to have a valid Flickr account to even use it (their accounts are free).  This helps with the first part about blogging.  If a user has specified they do not want their content to be blogged, I honor that and will alert the flickr4writer user with a message that the user they searched prevents blogging and no search results will display.  I feel that this complies with that setting within my application.  If a user wants to bypass my app and copy/paste the URL to the photo/video still…that’s Flickr’s problem now, not mine.  Adding authentication also enabled me to comply with the blogging settings of users because it identifies who the user is and whether or not they can blog the content.

The second thing I modified was to only return content that had Creative Commons or No known license attributes.  This actually makes sense and I needed to do it for a while.  The licenses I filter for are identified in the flickr.photos.licenses.getInfo API.  So if a user has content that is “All rights reserved” then it will no longer show up in the search…even if you are the owner of that content.  I’m interested in feedback on this one if you think I should do a check to see if you are the owner and allow you to see licensed content…leave a comment on how you feel about this one.

For the setting of hiding from 3rd parties…I cannot resolve this.  There is no setting for me to look at.  I’m quite disappointed that Flickr isn’t doing this at the API level as I think that they are violating the user preferences by enabling a loophole.  Should they enable a setting for this (I think they just need to fix the API), I will enable my application to comply even more.  Please if you are a Flickr user who has set this privacy setting, let Flickr know that you want it to be honored.

The authentication adds some initial screens to the use of flickr4writer.  When you launch the plug-in from within Writer, you’ll now see some prompts to authorize the application with Flickr.  There will be a button that will take you to Flickr to authorize the action.  This is only required one time and you won’t see it anymore unless you de-authorize the application on your account (which you have the complete control to perform).

Please upgrade to the latest version.  You will have to uninstall any previous version before installing, but will not lose any settings.  Thanks for your assistance in helping keeping flickr4writer compliant.