Monday, November 15, 2010

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>  

8 comments:

Anonymous said...

I implemented this solution, and it works fine in IE, but in FireFox, I receive a js error. Have you encountered this issue? It's erroring out in the mediaplayer.js file: "return objectElement.Content.MediaPlayer; "

Baris Bikmaz said...

It seems that the function "mediaPlayer.getOverlayPlayer" in the mediaplayer.js library can not return the mediaplayer silverlight object in Firefox. I get also an error "objectElement.Content.MediaPlayer is undefined" error.
objectElement is the dom node of the "object" tag, that contains the silverlight player. In IE the objectElement.Content property has a value whereas in FireFox this property is empty. I could check that with firebug.

This can be a bug in the JavaScript-Silverlight interaction.

Can you play the video directly from the asset library in Firefox? When you hover the video in the asset library a layer pops up where you can play the video. If not this can be a bug. So far, I couldn't find any solution.

Anonymous said...

Yes, I can play the video in the asset library by hovering over it. This implementation is definitely hit & miss...sometimes it works, sometimes it doesn't. Very odd. Please let us know if you find any solution. Thanks!

Baris Bikmaz said...

I solved the problem with firefox. Look at the post for the solution.

Mark Shenouda said...

what is templateSource and what does it do ??

Baris Bikmaz said...

The TemplateSource is URL reference to a XAML document containing a ControlTemplate definition to be used as the media player's style or skin. I do not know much about XAML but I think you can change the look of the silverlight player with this template. Here are some links:
- http://msdn.microsoft.com/en-us/library/ee558890.aspx
- http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.publishing.webcontrols.mediawebpart_members.aspx

bencaty41 said...

I came across to this post on occasion, althought it is a bit difficult for me to understand the JS, thank you all the same to sharing this built-in player. Keep go on.

Anonymous said...

Thank you man.

It works great!

Br,
Peter