SharePoint 2010 Tip of the day : Display your movies in an overlayer using the out of the box SilverLight media player.


Thanks to useful help of  Jomit, I managed to add an overlayer for the video.

Here’s what I did :

First : ensure that you have a reference the mediaplayer.js in your master page (if you want to reuse it in more than one page layout / page)

<script type=”text/javascript” src=”/_layouts/mediaplayer.js”></script>

(and don’t forget to end your script tag with a </script>, I spent several hours trying to understand why a <script … /> was not loading …

Second : once the  dom is loaded / ready (this is required otherwise the getElementById will return null and end the attachToMediaLinks function) trigger this : 

_spBodyOnLoadFunctionNames.push(‘mediaPlayer.createOverlayPlayer’);
mediaPlayer.attachToMediaLinks((document.getElementById(‘overlay_movies’)),[‘wmv’, ‘avi’]);

 

‘overlay_movies’ is the temporary div that I gave while testing, in my rendering I have something like :

 

<div id=”overlay_movies”>
   <ul>
      <li>
        a sample movie<br/>
     </li>
     …
   </ul>
 </div>

 

Videos

There comes a nice overlay player when you click on a media (with one of the extensions specified as parameter) in that div.

Advertisements