Once you get beyond the basic requirements, the “basic video player” becomes very involved.  A few questions that will need attention are:

• “How do you handler markers?”
• “How is streaming video handled?”
• “What do you do an an error?”
• “What’s the strategy for buffering?”
• “Can the video player support Smooth Streaming content?” (this is a whole different conversation)
• “How does the video player handle Closed captioning?”

And on and on the list goes.  At some point (hopefully in the analysis phase) you should ask is it better to build or buy.  If you decide to build, give me a call , but before you do I would encourage you to take a look at the following open-source (free) Silverlight video player options.  If nothing else, these players are great place to start.

I’ll start off with the three best options, then highlight other projects I am less familiar with.

Silverlight Media Framework (SMF)

http://smf.codeplex.com/

This is so much more than a video player, it’s an entire framework.  Developed by Vertigo in coordination with Microsoft, SMF has been used on the largest, most watched, Silverlight video players to date.  Wimbledon, NFL’s Sunday Night Football, PDC live keynote, and the NBC’s Vancouver Olympics video players, to name a few, all use SMF.  To say it’s robust would be an understatement.

Other than the standard video player controls, here are additional highlights of SMF:

• Smooth Streaming support – includes the Microsoft.Web.Media.SmoothStreaming.dll
• Great base classes like MergeableCollection, SimpleEventArgs and ObservableObject
• A light weight data project
• Logging
• Blendability – the player is easily skinned
• InStream markers
• Bitrate – the ability to show bitrate

For a more detailed list of features, and the code, check out SMF’s site.

Silverlight Video Player

http://slvideoplayer.codeplex.com/

If you have ever watched a video on Channel 9 (if you haven’t check out Silverlight TV) the player being used is this video player.  It was developed by Tim Heuer (Microsoft) and Joel Nuebeck (Silverlight MVP).  Although SVP does not the feature set the SMF player has, this is still a solid and proven video player.  It’s is probably the best option for a standard, light weight, feature rich video player.

Silverlight HyperVideo player (HVP)

http://slhvp.com/

A new video player to the scene is the Silverlight Hyper-Video Player (HVP).  This offering is from Jesse Liberty (Microsoft) and the Community.  Targeting Silverlight 4, HVP takes advantage of the MEF framework and is rooted in best development practices.  Although the project is young, there is a lot of traction and Jesse is doing an amazing job of documenting each step.  Keep on eye on HVP as this maybe the most scalable offering.

Others

The above three video players I have personally used, dug through the code, and/or evaluated.  The following projects I am not as familiar with, but could be possible options for your scenario:

Sharepoint video player – http://svp.codeplex.com/

Silverlight Media Player http://silverlight30.codeplex.com/

xLite player - http://xliteplayer.codeplex.com/

First create a simple UI (a Rectangle and a Button).

Add an event to the button click event.  The logic looks like this:

• Get a handle on your video capture device using CaptureDeviceConfiguration.
• Request access to the device with CaptureDeviceConfiguration.RequestDeviceAccess().
• If the user clicks Yes, then create a CaptureSource object and set the VideoCaptureDevice to the selected webcam.
• Create a VideoBrush
• Set the Source of the VideoBrush
• Start the webcam
• Paint the Rectangle (this could be anything that takes a Brush)

Next step, F5 (run your app).  You’ll be looking at a blank screen with a button.  After clicking the button, a box appears prompting the user to allow access to the webcam and microphone.  Click Yes, since after all that is our goal .

Voilà!! You are now looking at yourself. Now you can do all sorts of fun web cam stuff.  Enjoy.

Tip

After running the above app, I noticed it was backwards.  Meaning when I moved left my face on the screen moved to my right.  Maybe it’s just me, but my brain was not happy about this.  Instead, I wanted the app to respond like a mirror.  To do this was a quick fix; simply Flip the Rectangle on the X axis.  Here is the menu in Blend to do this:

More info

For more information, Tim Heuer has a great video covering Web cam and microphone support in detail: http://silverlight.net/learn/videos/all/access-web-camera-microphone/

Problem: You need text to dynamically add elipses, "…",  to the end of a sentence.  The difficulty is how do you detect the actual length of the string.  All characters are not created the same.  Ten i’s != ten m’s.

Solution: Robby Ingebretsen at NerdPlusArt.com (and of Kaxaml fame) has a dynamic control that does just this.  http://blog.nerdplusart.com/archives/texttrimming-textblock-for-silverlight.

The solution is very Elegant.  Robby wraps a TextBlock in a Content control then manipulates the Text inside based on the size.  Best of all…he as post code and an example.  Thanks Robby.

Recently I had a need to create a Checked Command for a ToggleButton.  There are many sources on how to create a Command, the best one probably being Erik Mork’s video, but there wasn’t a place to grab the a Command from.  The intention of this post is to share the Checked and UnChecked Prism Commands for you to use it in your project.  (Moving forward, it might make sense to create a repository of these Commands.)

Finally, before diving in, if you just want the code and to see an example, follow these links:

• Code
• Example

Commands

Creating the Commands is straight forward.  Derive from CommandBehaviorBase and specify the type.  Then, in the constructor, register the event.  Below are both the Checked and UnChecked commands.

Extensions for Xaml

After creating the Commands you need to create Static methods to reference in Xaml.  The Static methods are named Checked and UnChecked.  They include a definition for:

• SelectedCommandBehaviorProperty
• CommandProperty
• SetCommand
• GetCommand
• OnSetCommandCallback
• GetOrCreateBehavior

In an effort to be brief I have chosen to truncate the two static methods.  To take a closer look at the code, click on the image or download the code.

Checked.cs

UnChecked.cs
 

Hooking everything up

After the Commands are created, bind them to the ToggleButton in Xaml.  In this sample application there are three main files:

• MainPage.xaml – the presentation. This contains the binding to the Commands.
• MainPage.xaml.cs – the primary function of the code-behind is to new up the MainPageModel and set the DataContext.
• MainPageModel.cs – this is the model for the MainPage. It defines the commands the Xaml binds to as well as a property for the TextBox to bind to.

Below are images of the classes mentioned above:

MainPage.xaml

Note in this Xaml, line 20 binds to the CheckedState property in the MainPageModel.  The commands are bound on line 22 and 23.  Take notice of the namespace command.  Instead of referencing Microsoft.Practices.Composite.Presentation.Commands it references ProjectName.CustomCommands.

MainPage.xaml.cs

This is the code-behind for the above UserControl.  On the Loaded, a new instance of MainPageModel is initialized and then set as the DataContext to the UserControl.  The heavy lifting is done in the MainPageModel.

MainPageModel.cs

As noted above, the MainPageModel does the heavy lifting.  The following describe what happens in this file:

• Two DelegateCommands are defined for Checked and UnChecked. (line 36 and 41)
• A Property called CheckedState is defined and fires the PropertyChanged event when updated. (lines 13 – 22)
• Two methods are defined to handle the actions on the Commands. (lines 47 – 59)

The final product

Code | Example

To paint the picture, I am introducing Silverlight to creatives, Flash devs, and people in the business.  Each group needs a different story.  At first I went about it the same way: naturally I would load Visual Studio, create a new project, knock out some XAML, and then run the app.  THIS IS NOT A GOOD IDEA.  Instead, I found myself increasingly opening Blend and showing people around.  This lead to more interest and more questions.

Side note: Visual Studio is an amazing development tool, however I strongly believe Blend will become the tool of choice for developing Silverlight applications.  I don’t see this happening in for Blend 3 or 4, but Blend is making a compelling case to be THE tool for Silverlight dev.

All this background leads me to this conclusion: If you want to quickly pick up Silverlight, start with Blend (there is a 30-day free trial).  Additionally, here are the first 3 topics you should focus on once in Blend:

1. Understanding the Layout Panels
2. Animations
3. States and Templating

(I realize this is a simplification.  Topics like databinding, integrating sample data, and wiring up events are important.  However, these three topics are a perfect starting point.)

Understanding the Layout Panels

There are three main Layout panels in Silverlight 3: the Grid, Canvas, and StackPanel.  The Silverlight Toolkit offers more layout types such as DockPanel, WrapPanel, and ViewBox.  Here’s a brief look at the three main panels:

Canvas – the most basic panel.  Elements are placed at explicit coordinates.

Grid – the most flexible of the three.  Elements can be arranged in rows and columns.  Additionally children can grow dynamically within the Grid.

StackPanel – arrangement of children elements are handled automatically.  The StackPanel is a great option when you have a list of items.

For a more in depth look at the Layout Panels check out Scott Guthries post.

Layout Panels in Blend

Once you know and get comfortable with how each panel works, you’ll be able to make the best decision for your application.  The tendency for Flash developers might be to go straight to the Canvas, then handle updating the layout from code.  I urge you to take some time to play around with the other panels

In Blend, you can draw panels on the Artboard by selecting a panel from the Toolbox. 

Animations

Getting comfortable with animating elements in Blend takes a little getting use to.  The first time you try to add an animation it takes a minute to locate the add animation button.  It’s the plus sign at the top of the Objects and Timeline panel:

After you’ve created the Storyboard, the Artboard gets a red outline.  This lets you know you are recording.  Any property changed while recording will be added to the animation.  It took me some time getting use to this.

A tip to working with animations is to change Workspace to an Animation friendly view.  Do this by selecting Window > Workspaces > Animation.  You’ll notice, the Timeline stretches out at the bottom.

States & Templating

Finally, in my opinion, the most important thing to understand Sttes and Templating.  The reason I think it’s so important is because of Silverlight’s rich control set.  Understanding Templating and States enables you to use existing controls and completely change the visuals while still maintaining it’s base States and functionality.

This topic is very deep and much better served in it’s own post.  For the time being here are a couple links about States and Templating.

What are States – http://kokchiann.wordpress.com/2008/06/05/visual-state-manager-new-feature-of-expression-blend/

Templating a ToggleButton to look like a playhead for a video player – http://www.85turns.com/2008/09/05/making-a-play-pause-button-in-silverlight/

The option to turn this off is buried in the Options.  The below figures show how to change the default behavior.

First click Tools > Options.

Then navigate to Text Editor > XAML > Miscellaneous.  Check the box that says Always open document in full XAML view.  If you don’t see Text Editor in the options menu, check the box Show all settings in the bottom left of the Options window.