Thursday, March 8, 2012

DVWP - Video Gallery with Overlay Silverlight Media Player - Sharepoint 2010

There are multiple blogs already available on how to use built-in Silverlight Media Player in Sharepoint (I am using info provided on these two):

http://jomit.blogspot.com/2009/12/using-silverlight-media-player-of.html

http://blogbaris.blogspot.com/2010/11/play-video-from-asset-library-in.html
and many more just search for  _spBodyOnLoadFunctionNames.push('mediaPlayer you will get the list.

the directions are very simple: Add code and divs with static links to Content Editor Webpart and voilĂ  you've got yourself a video list.

But if you have a library where videos are uploaded daily, then you have to update it every time a new video needs to be posted, and I don't like sticking code in Content Editor WP.

Data View Web Part (DVWP) does it better and you set it up once.

Microsoft's Sharepoint videos page is using DVWP with media player above the listing - v. fancy
http://sharepoint.microsoft.com/en-us/Pages/Videos.aspx?VideoID=30


I like the overlay option because in case the video library is long, clicking on the link takes you to the top of the page where media is playing and then you have to scroll down to view another video.

Description: Data View Web Part modified to play videos in overlay, preview images and titles are linked,  links are sorted by Modified Date, Comments Field is a description. All of these fields are default fields attached to Asset library.
In Publishing site with custom page layouts you will have to detach page from the layout and reattach it to make changes. Page with the video list should be in the same site as the Assets/Video library.

1. Create new Asset library, name it.
2. Upload your videos wmv, avi or mp4, add Title, Comments and link to the preview image


3. Open Site in Sharepoint Designer, Expand "All Files", expand "Pages" folder, I am modifying videoLibrary.aspx file. Right click on the file and select "Detach From Page Layout", right click again and this time "Edit File in Advanced Mode"

4. Click on "Split" to show Split view of the Design and Code (bottom of the editing area)
in the design view locate Web Part Zone and click inside the area.

5. From the Ribbon > Insert Tab> In the Data Views & Forms Area > Select Data View > Empty Data View

6. Select your video library from Document Libraries by clicking on "Select a data source"

7. In the Data Source Details area select first item in the Rows this will create connection to the list, usually it is Name field and from the dropdown "Insert Selected Fields as" select "Multiple Items View".

8. From the Ribbon > Data View Tools > Paging > All Items

9 From the Ribbon > Data View Tools > Sort & Group: add Modified and Select Ascending

10. In the Web Part Tab Set Chrome Type to None

11. In the Web Part Tab click on Properties and in the Data View Properties click on the XSL editor

Replace SP xsl with the following



<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema"
    xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0"
    exclude-result-prefixes="xsl msxsl ddwrt ddwrt2 __designer asp SharePoint d x"
    xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
    xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
    xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
    <xsl:output method="html" indent="no"/>

<!-- Start Template -->
    <xsl:template match="/">
        <!-- Container  ID should match getElementByID -->
        <div id="mediaPlayerList">
            <xsl:apply-templates/>
        </div>
        <!-- Link into Video Overlay  -->
        <script type="text/javascript" src="/_layouts/mediaplayer.js"/>
        <script type="text/javascript">
             <![CDATA[
            _spBodyOnLoadFunctionNames.push('mediaPlayer.createOverlayPlayer');
            mediaPlayer.attachToMediaLinks
            (
            (document.getElementById('mediaPlayerList')),[ 'wmv', 'avi', 'mp4']);//]]>
        </script>
    <!-- Firefox fix for the media player -->
        <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>

    </xsl:template>
<!-- End Template -->
    <xsl:template match="/dsQueryResponse/Rows/Row">

        <!-- This markup is used for each item in the list -->
  <div class="mediaItem">
   <div class="mediaTitle"><a href="{@FileRef}"><xsl:value-of select="@Title"/></a></div>
   <div class="mediaImage"><a href="{@FileRef}"><img border="0" src="{@AlternateThumbnailUrl}" alt="{@AlternateThumbnailUrl.desc}"/></a></div>
   <div class="mediaDescription"><xsl:value-of select="@_Comments"/></div>
  </div>
    </xsl:template>
</xsl:stylesheet>


Save the page, reattach it to the page layout.

I am not including any css to go with my classes for title, image and description, these are the id and classes used:
#mediaPlayerList - container for the entire list
.mediaItem - container for each item float it to the left add some width and you can set it as multi col. display
.mediaTitle - div for the title
.mediaImage - div for the image set width/height to a number to re-size all the thumbnails
.mediaDescription - div for the video description - Comments field


There are probably blogs that have these instructions and better, but I could not find anything useful to me - I only have access to SP Designer. So if you have a secret stash of blogs that do, don't be a stranger share, because sharing is caring :)