As part of a recent project I need to build a video player carousel, like this;

The merits of a Carousel in an Intranet are Debatable:

http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/

That aside, I went ahead to build one.

The subject of this post is not how to aggregate video data and display it on the page, but rather how we can use the Silverlight video player, that comes with SharePoint, to play the videos in the carousel, like this;

1 option is just to render links in your markup and set the href attribute to the video Url in the document library, then when a user clicks the link, the video will open in your desktops video player. This is Ok, but not great.

So lets take a back step, when you create an Asset library in SharePoint and drop some videos in there, hovering the mouse over a video throws up a hover card which includes a button, that if clicked, plays the video using the Silverlight player, see below;

Click the Play button and the video plays in the Silverlight player;

This is exactly what I wanted, so how do we do that?

Looking into the Thumbnail view for an Asset library, we see that 2 important .JS files are included;

1. _layouts/{locale id}/CMSSiteManager.js
2. _layouts/Mediaplayer.js

Mediaplayer.js, as you might guess, contains all the code for creating and initialising the media player.
CMSSiteManager.js plays an important part in many of the Publishing UI features and view rendering. Of particular interest in this file is the code starting around line 3158 where it calls mediaPlayer.attachToMediaLinks(…).

This function is found in Mediaplayer.js at line 371, and accepts a DOM element as a parameter (amongst others).
The function then locates all child elements of this ‘root’ DOM element and adds an onclick event handler to play the video using the elements href attribute as the video url source. This function also, if the forceMediaTitleFromLinkTitle parameter is true, sets the media player title using the value of the element’s title attribute.

A pretty useful SharePoint nugget, but how do we use this for our purposes?

So knowing this, I created my video carousel markup as shown, with a outer container (DIV) and each video slide container (DIV) containing an element for the video with the href and title attributes set to the correct values, see the image below;

So now our markup is done, we just need to write a little javascript to hook the video markup into the media player.

First we’ll need to include the mediaplayer.js file, either in your masterpage, page layout or the page itself;

<script type='text/javascript' src="/_layouts/MediaPlayer.js"></script>

Next, I created a separate .JS file for my video player code, but you could include it in the masterpage, page layout or the page itself.
The purpose of this code is to initialise and create the media player and to hook it up to my video markup;

     /* initialise the SharePoint silverlight media player */
     var silverlightExtensions = ['wmv', 'wma', 'mp3', 'mp4'],
               popElZIndex = 200,
               isMediaPlayerReady = false,
               isMediaPlayerDefined = (FV4UI()) && typeof (mediaPlayer) != "undefined";
     if (isMediaPlayerDefined) {
          if (mediaPlayer.getOverlayPlayerElement() == null) {
               mediaPlayer.createOverlayPlayer();
               isMediaPlayerReady = mediaPlayer.getOverlayPlayerElement() != null;
          } else {
               isMediaPlayerReady = true;
          }
     }
     if (isMediaPlayerReady) {
          /* get the parent element which contains my video (A) elements */
          var mediaPlayerParent = $rb(".rb-videos-inner").get(0);

          /* attach the media player to my video (A) elements...
               last 'true' parameter causes media player title to be set from title attribute of video (A) elements */
          mediaPlayer.attachToMediaLinks(mediaPlayerParent, silverlightExtensions, null, true);

          /* set an appropriate z-index for the media player overlay */
          mediaPlayer.getOverlayPlayerElement().style.zIndex = popElZIndex + 1;
     }

Most of the code to initialise and create the media player is extracted from CMSSiteManager.js, the important parts are the last few lines where;

• I use jQuery to get the DOM element which contains the video container DIV‘s, each of which contains an element an <A/> video element
• Call mediaPlayer.attachToMediaLinks(…) using the container DOM element, the last parameter passed instructs the code to use the element’s title attribute as the video player’s title.
• Set an appropriate z-index for the media players overlay.

And thats it, job done.