Simple Silverlight Media Player
A couple of people haved asked me about the Silverlight media player I’m using on this site to stream some of my screencasts. I’d like to tell you that I toiled, worked long hours, put my sweat and blood into creating my own Silverlight media player. And you’re free to believe that even after you read this post. The reality is that I did no such thing. Instead I used a cool feature in Expression Blend 3 called template editing. Below are the details.
After creating a new Silverlight project in Expression Blend 3, I added a MediaPlayer to one of my pages:
The out-of-the-box media player is pretty slick. However, it has a lot of bells and whistles that I don’t need/want for a media player that’s going to serve up screencasts. For example, my media player doesn’t need to show chapters. So, the question is, how can I modify the out-of-the-box media player? The answer is really quite simply, use template editing. What is this, you ask? Template editing allows you to edit a copy of the default template for a given control so I can bend it to my liking. How do you do it? It’s easy. Right-click on the control whose template you want to edit and click “Edit Template”, “Edit a Copy…”
Now you can edit the template to your heart’s content.
Since the purpose of this media player is to be a re-usable component that people could have multiple instances of on their web sites, there were a number of features I needed to expose publicly that could be set from the page hosting the player.
- Media Source. The uri to the file to be streamed.
- Title. The title to display in the player.
- Thumb Source. The uri to the image to use as a thumbnail.
- Auto Load. Controls whether or not the content is downloaded to the client’s machine automatically when the player loads or only when a request is made to play the content (default).
- Auto Play. Controls whether the content plays when the control is loaded or plays on demand (default).
All of these properties, with the exception of the Media Source, are optional and can be set via InitParams. The Application_Startup method parses the InitParams and pass them to the Silverlight page (MainPage.xaml) that hosts the media player. MainPage.xaml then sets the properties of the media player element to correspond to the values passed to it.
You can get the application, source code, and instructions on CodePlex here.
All in all there’s not that much code to this little application. However, due to how it has been constructed it’s incredibly flexible and reusable. For example, you can use it in your site, within a WordPress blog (like my blog for instance), or within a SharePoint portal (WordPress and Sharepoint instructions are on the CodePlex site). I’ve found this app incredibly useful, I hope you do too.
