Using the Built-in Silverlight Media Player of SharePoint 2010

SharePoint 2010 has a simple but extensible Silverlight Media Player built in which we leveraged on the sharepoint2010.microsoft.com site for the Videos section.

 

Here is the JavaScript code to use this media player :

<script type="text/javascript" src="/_layouts/mediaplayer.js"></script>
<script type="text/javascript">
        _spBodyOnLoadFunctionNames.push('mediaPlayer.createOverlayPlayer');
        mediaPlayer.attachToMediaLinks
                (
                        (document.getElementById('<<DIV ID HERE>>')),
                        ['wmv', 'avi', 'mp3']
                );
</script>

Firstly we need to include the ‘mediaplayer.js’ file which essentially has all the API’s to work with the Silverlight media player and also does the integration with the HTML elements on the page.


Now in the background the media player script creates a transparent div on the page and than calls the ‘MediaPlayer.xap’ file which is under ‘14”hive/TEMPLATE/LAYOUTS/ClientBin’ to render the videos.To create this transparent div we need to call the ‘createOverlayPlayer’ method first. Since this function needs to called on the body’s onload event we have to add it to the _spBodyOnLoadFunctionNames array.


Now to integrate this with the HTML elements the mediaplayer library provides a function ‘attachToMediaLinks’ which essentially finds all the anchor tags within the given div and adds an onclick event handler for them which renders the above mention transparent div, which in-turn renders the silverlight media player.