Saturday, January 10, 2009

Preview or play Video files in library

There are many ways of displaying video in a sharepoint site, my personal favorite is by Manoj Iyer from blog.  But I often heard that the requirement is to have a video player almost imbedded into a video library.  Something that would allow to pick a video file without leaving the list of files and start playing it. something similar to the following picture.


Well, it's very easy to create with Sharepoint designer

Let's start:

1. Create a Web part page, I’ve chosen the one with left column and body and named it Preview.aspx.

2. Open this page in the edit mode and insert Content Editor Web Part. Once you inserted the Content editor Web Part and pasted the code from blog... I modified this code, but this modification does not change any functionality only height and width of the viewer, here it goes:

<div id="Player"> </div>
<script type="text/javascript">
function getParameter(szName)
// Get value out of supplied parameter
var szUrl =;
szUrl = szUrl.toLowerCase();
szName = szName.toLowerCase();
var szValue = "";
var nBegin = szUrl.indexOf(szName);
if (nBegin != -1)
szValue = szUrl.substring(nBegin + (szName.length + 1));
var nEnd = szValue.indexOf("&");
if (szValue != "" && nEnd != -1)
szValue = szValue.substring(0, nEnd);
return szValue;

function wmpCreate(url) {
var str = "";
var agt = navigator.userAgent.toLowerCase();
var is_ie = (agt.indexOf("msie") != -1);
if (is_ie) {
// create the WMP for IE
str = '<object id="contentPlayer" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="400" height="400">';
} else {
// create it for FF.
str = '<object id="contentPlayer" type="application/x-ms-wmp" data="'+url+'" width="400" height="400">';
str += '<param name="url" value=""/>';
str += '<param name="uiMode" value="full">';
str += '<param name="autoStart" value="-1" />';
str += '<param name="stretchToFit" value="-1" />';
str += '<param name="windowlessVideo" value="0" />';
str += '<param name="enabled" value="-1" />';
str += '<param name="enableContextMenu" value="-1" />';
str += '<param name="fullScreen" value="0" />';
str += '</object>';
return str;
function videoCreate() {
document.getElementById('Player').innerHTML = wmpCreate();
var wmp = document.getElementById('contentPlayer');
wmp.URL = getParameter("url");;

3. Open this page in SharePoint Designer.

This is where the fun part begins.

4. Into the left column insert DataView Web Part with the “media” library as the source.

5. Select all columns that you want to have displayed from the "media" library.

6. Insert a column at the end of the table and create a hyperlink there. Name of the hyperlink that I've chosen is "Preview"


In the address field paste the following string.

javascript: {ddwrt:GenFireServerEvent(concat('__redirect={Preview.aspx?url=http://srv1/media/media/',@FileLeafRef,'}'))}

Let's see what it does:

This script is redirecting to this same page Preview.aspx, but adds a parameter called url with the url reference to the media file, so replace "http://srv1/media/media/" with the url to YOUR media library. @FileLeafRef will simply imbed actual file name at the end.

As soon this redirection happens the content editor web part with the player will take the url to this file and start playing it.


Now every time you click the preview link next to the file name, the player will start playing this video.



Christophe said...

Note that you can get a similar result without SharePoint Designer.
See a demo here:
This is based on a method I call the "HTML calculated column":

Ian Morrish said...

Credit should have come from
If you have MOSS then you can also use publishing pages

Subhan said...

Hi Natalya,

I recently came accross your Preview or play Video files in libary and other posts and they are really awesome.
Thanks for posting such great posts.

i have a simple and a less complex scenario in two situations.

1)where i need to show a button column"MarkComplete" if the "CompletedDate" column is blank.

2)If the "CompletedDate" is not blank the Button Column "MarkComplete" should be invisible.

At this stage i am able to load a button in the view list(using custom field type and adding CDATA in the render pattern).

Please advise.

Thanks again Natalya for your wonderful posts.

Keep up the great work.!


Natalya Voskresenskaya [SharePoint MVP] said...

Tyr the conditional formating in the DataView Web Part in SPD

Subhan said...

Ok but where can i write the button click event of the HTML button i added to the list view to fill the completed date colum to present date and refresh the view..? sorry new to SPD

any code snippet or a link will helpful


Ruven said...

Hi Natalya,

This is great stuff!

For people who don't like to dig into this level of detail, I saw a post the other day that Bamboo has a free video library web part with a quick player.

It may be worth investigating (I haven't tried it myself yet).


SmithJ said...

I found this free Video Library from Bamboo Solutions
it has the review option

Natalya Voskresenskaya [SharePoint MVP] said...

Subhan, the following blog post describes how to add this in SPD

Bill Qiao said...

Hi Natalya,
thanks for your great post.

and I think the preview hyperlink could be better like this.

javascript: {ddwrt:GenFireServerEvent(concat('__redirect={Preview.aspx?url=',@ServerUrl,'}'))}

and one question please:
the method can't preview files in sub-direction. please kindly give suggestion for this.


Scott said...

Just came across your "Preview or play Video files in library" post. AwweeeSome. I am faily new to SPD (about 6 months)so I hope I don't sound thick headed but...
I was unclear how to add a column the the data view wp and how I can add the new field in SPD.
Thanks in advance.
Did I say your blog was Great!

Rudy said...


Great article. But wondering if it is possible to add the content editor web part just in the media library(there is webpart zone in library), but enable the media file to send the url to the web part when user click the media file name or setup a preview link like in this article. The reason is as described in this post the player is in another page not in library. Please advise. Hope you can check this.