Play a video from a asset library in SharePoint with the built-in Silverlight Media Player

The Problem:
You want to place a link into your SharePoint site which opens the Silverlight player in a lightbox and plays a video from a asset library.

Solution:

1) Place the link within an other HTML element like a div, li or span and give this element an id. The link can be somewhere in this container, also in a deeper level

- the link to the video must be serverrelative
- the link can have a title. This can be used as Video title

<div id="mediaplayer">
   <a href="/site/listname/myvideo.wmv">Video</a>
 ..
 ..
</div>

Video link

2.) Place a script tag for the mediaplayer library and a custom script tag for our custom js. You must place it after or in the onload event, because when you use getElementById the element must exist in the DOM.

<div id="mediaplayer">

   <a href="/site/listname/myvideo.wmv">Open Video</a>

 ..

 ..

</div>

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

Silverlight player

The "spBodyOnLoadFunctionNames.push('mediaPlayer.createOverlayPlayer'); " creates the overlay

The methode "mediaPlayer.attachToMediaLinks " needs 4 arguments.
(1) The DOM object which surrounds the links
(2) The extensions to pay attention to. It searches the <a> Tag for this extensions
(3) templateSource. A Template for the player
(4) Use Title. When true the title attribute of the a tag is used as player title


Update 17.02.2011: Modifications for Firefox
A reader has commented that the code above does not function in Firefox, and was right.
So I opened the assest library in Firefox and tried to play the video there. No chance.

After digging deeper into the code of the mediaplayer.js I think now that the problems occurs between the communication of Silverlight and JavaScript, but not sure when. When Silverlight Objects are initialized they create a Wrapper Object for their object DOM Nodes. In MediaPlayer.js the HTML for the object Tag is created automatically by the createMediaPlayer function. Firefox could not always create these DOM Wrappers (but sometimes??) when the object tag is created automatically. So the easiest way to create the player in Firefox is to add the object tag manually:

<div id="mediaplayer">
  <a href="/site/listname/myvideo.wmv">Open Video</a>
...
</div>
<div>  
      <object height="1" width="1" id="Silverlight_Shared_MediaPlayer" data="data:application/x-silverlight," type="application/x-silverlight" style="position: fixed; top: 0pt; left: 0pt; z-index: 50;">  
           <param value="#80808080" name="background">  
           <param value="true" name="enableHtmlAccess">  
           <param value="/_layouts/clientbin/mediaplayer.xap" name="source">  
           <param value="isOverlayPlayer=true" name="initParams">  
           <param value="true" name="windowless">  
      </object>  
 </div>  
 <script type="text/javascript" src="/_layouts/MediaPlayer.js"></script>       
 <script type="text/javascript">  
      mediaPlayer.attachToMediaLinks(document.getElementById('mediaplayer'), ['wmv', 'avi', 'mp3']);  
 </script>