This post is the first video post on the site, and covers how to build a Silverlight Media Player that you can use in any web page whether it be static HTML, ASP, ASP.NET, SharePoint, PHP, whatever. More specifically, it shows how I built the media player you will use if you choose to watch this video tutorial!

 

My particular implementation uses SharePoint (MOSS 2007), where I am hosting the script file, master page, CSS stylesheet, and the player .xap file file as well as all of my WMV media files. After all, is this not what SharePoint was designed for? I do however use a third-party Silverlight media player control, provided by ComponentOne, but in a subsequent post I will describe how this can be easily modified to use the Smooth Streaming Media Player from the Silverlight Media Framework. This way, this can be an entirely free solution to create for your own websites.

 

We are really just creating a wrapper for an existing media player control. We are NOT writing any kind of playback functionality, full-screen capabilities, volume control, or even providing any kind of UI, short of our one single third-party control that occupies our entire default grid. After watching the video or downloading the code, it should be pretty easy to modify this shell to fit your particular player needs.

 

So, how does it work? Basically, we are going to use jQuery and some very simple markup to easily add media to blog posts, articles, whatever, wherever, whenever. Our script takes 2 attributes of a div tag we add to our page as a placeholder, and dynamically generates the correct object and param tags for displaying a single Silverlight player file, initialized with whatever Title and WMV file URL we pass it. It then uses jQuery to insert some templated markup right into the DOM as the content of the placeholder div we added.

 

One of the limitations I encountered with my personal solution, was that SharePoint strips out object and param tags from content fields that use the HTML Editor... so no matter what I did, I could not add my player to a page as markup in a content field. From a Content Editor Web Part, I could add the correct tags, but not as content in an HTML field.

 

With this solution, I can easily add a div tag with valid attributes that wont be stripped out, and when the page loads it takes that info in $(document).ready() and inserts instances of the player pointing to the correct Video URL wherever a div with a certain class is found! Minimal markup, powerful reuse!

 

In my implementation, the script is embedded in my master page and works on all pages in the SharePoint Site that use that master page. Because its only javascript, jQuery, Silverlight and CSS, it will work anywhere where we have the ability to execute the javascript calls!

 

Now, I vaguely remember someone mentioning a video in here somewhere?