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 http://www.sharepointkings.com/2008/05/play-video-into-sharepoint-page.html 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.

image 

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 http://www.sharepointkings.com/2008/05/play-video-into-sharepoint-page.html 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 = window.location.search;
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");
wmp.controls.play();
}
_spBodyOnLoadFunctionNames.push("videoCreate");
</script>

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"

image 

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.

image

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

Enjoy

11 comments:

Christophe said...

Note that you can get a similar result without SharePoint Designer.
See a demo here:
http://hermes.spirex.se/labb/WMS/default.aspx
This is based on a method I call the "HTML calculated column":
http://pathtosharepoint.wordpress.com/2008/09/01/using-calculated-columns-to-write-html/

Ian Morrish said...

Credit should have come from http://www.wssdemo.com/Pages/video/video.aspx
If you have MOSS then you can also use publishing pages http://www.wssdemo.com/Blog/Lists/Posts/ViewPost.aspx?ID=418

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.!

Thanks,
Subhan

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

Thanks,
Subhan

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).

http://community.bamboosolutions.com/blogs/bambooteamblog/archive/2008/12/16/introducing-the-bamboo-video-library.aspx

-Ruven

SmithJ said...

I found this free Video Library from Bamboo Solutions
http://community.bamboosolutions.com/blogs/bambooteamblog/archive/2008/12/16/introducing-the-bamboo-video-library.aspx
it has the review option

Natalya Voskresenskaya [SharePoint MVP] said...

Subhan, the following blog post describes how to add this in SPD
http://spforsquirrels.blogspot.com/2008/03/follow-up-training-classes-scheduling.html

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.

thanks

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...

Hi,

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.