SharePoint Video Library Template Available For Download

SharePoint Video Library provides a simple way to share and organize flash video files (.FLV) in a SharePoint site.

A few months ago I published a video player web part on CodePlex that can play flash movie files. Basically what the web part does is embed the Flash movie (SWF), which mapped to JavaScript. The SharePoint Video Player Web Part uses the open source player - flowplayer, and is based on the Flash technology. Even though creating this web part was no rocket science, it became a very popular web part, with more than 10 downloads a day.

One of the great things about sharing your work with others is the feedback with some nice ideas. Last month, two people posted comments on my blog about this web part. The idea was to integrate the web part is a SharePoint library, in a way that makes it easier for users. Something like a link that opens the player automatically and plays the selected movie.

Now that I got the idea I had to find a solution. I decided to create a custom filed that display a clickable image which open the player. Then, when the custom field was ready I could add it to a SharePoint Document Library and generate a SharePoint document schema. Finally, I had to create an application page that contains the player and play the selected movie.



In this article I will describe how I created this library. Again here are the three things I had to develop to accomplish this idea:

• Custom Filed
• List Definition
• Application Page

Custom Field


First let’s start with the custom filed. I will not explain how to create a custom field from scratch; there are lots of articles about that. But, let me show you how to render a field in away to that display a clickable image which opens a popup page. SharePoint fields are rendered on the page using the Field Type Definition. Here bellow you can see the render pattern that I used:

<RenderPattern Name="DisplayPattern" >
<FieldSwitch>
<Expr>
<Property Select='HowOpenUrl'/>
</Expr>
<Case Value="Self">

<HTML><![CDATA[<a target="_self" href="../../_layouts/Havivi_SharePointVideoPlayer.aspx?video=]]></HTML>
<Column Name="ID" />
<HTML><![CDATA[&listID=]]></HTML>
<List />
<HTML><![CDATA[">]]></HTML>
<HTML><![CDATA[<img border="0" src="../../_layouts/images/flowplayer_icon.png"></a>]]></HTML>
</Case>
<Case Value="New">
<HTML>
<![CDATA[
<script language="javascript" type="text/javascript">
var win=null;
function NewWindow(mypage){
LeftPosition=(screen.width)?(screen.width-522)/2:100;
TopPosition=(screen.height)?(screen.height-348)/2:100;
settings='width=522,height=348,top='+TopPosition+',left='+LeftPosition+', scrollbars=no,location=no,directories=no,status=no, menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,'a',settings);}
</script>
]]>
</HTML>
<HTML><![CDATA[<a target="_blank" href="#" onclick="javascript:NewWindow('../../_layouts/Havivi_SharePointVideoPlayer.aspx?video=]]></HTML>
<Column Name="ID" />
<HTML><![CDATA[&listID=]]></HTML>
<List />
<HTML><![CDATA[');return false">]]></HTML>
<HTML><![CDATA[<img border="0" src="../../_layouts/images/flowplayer_icon.png"></a>]]></HTML>
</Case>
<Default>
<Column HTMLEncode="TRUE" />
</Default>
</FieldSwitch>
</RenderPattern>


There are two key elements in this render pattern; one, is the JavaScript code which simply opens the application page in the center of the screen. And the second is the QueryString; to be able to open the selected item in a new page, I had to pass two parameters- the item ID and the List. To pass the List Id you can simply add this <List />, for the selected item id you add this <Column Name="ID" />. For the complate custome filed defenition see: http://svp.codeplex.com/SourceControl/changeset/view/45523#910812


List Definition


This was the easy part, after creating this custom filed I added it to a out of the box document library and I used the SharePoint SharePoint Solution Generator to generate my list definition. Again there are enough articles about this process so I will not go into details. If you are curious you can view the complete schema here: http://svp.codeplex.com/SourceControl/changeset/view/45523#910808

Application Page


My application page is very minimal one; the purpose of this page is to retrieve the selected item and to display it in the player. Here is the code behind:

protected void Page_Load(object sender, EventArgs e)
{
string listIDQS = Request.QueryString["listID"].Replace("{", "").Replace("}", "");
Guid listID = new Guid(listIDQS);
SPList list = SPContext.Current.Web.Lists[listID];
int itemID = int.Parse(Request.QueryString["video"]);
SPListItem item = list.GetItemById(itemID);
SVP svp = new SVP();
svp.FLVBestand = SPContext.Current.Web.Url + "/" + item.File.ToString();
this.Controls.Add(svp);
this.Controls.Add(new LiteralControl("<center><font style=\"color:White;font-family:Arial ;font-size:9pt;\">" + item["Title"] + "</font></center>"));
}

As you can see I retrieve the list id and the item id from the query string, then I create a new instance of the SharePoint Video Player Web Part and finally set the property FLVBestand (this property is the flv file location).

Download


You can download the SharePoint Video Library Template here.

Install


To install the SharePoint solution you can use this stsadm commands:

stsadm -o addsolution -filename SharePointVideoPlayer.wsp
stsadm -o execadmsvcjobs
stsadm -o deploysolution -name SharePointVideoPlayer.wsp -immediate -allcontenturls -allowGacDeployment -allowCasPolicies
stsadm -o execadmsvcjobs

Then activate the site feature:

Site Actions->Site Settings->"Site collection features "Under ("Site Collection Administration ")->scroll to "SharePoint Video Player" and click "Activate" button.

Create Your Video Library


Navigate Site Actions --> Create

In the Create page (_layouts/create.aspx) select Video Library


summary


The main functionality of the SharePoint Video Library is to open the selected item with the flash player in external window.

By Alon Havivi   Popularity  (23244 Views)
Picture
Biography - Alon Havivi

Alon Havivi is a Microsoft Certified Technology Specialist, working as SharePoint Consultant / Developer at e-office. Specialized in SharePoint 2007/2010 and SharePoint Online (Office 365). With more than 10 years of experience in analysis, design and development complex Internet and Intranet portals using the latest Microsoft tools and practices, such as C# .NET 4.0, Silverlight and Windows Azure platform. Besides professional work, I write articles/blog and publish open source projects on CodePlex
View Alon Havivi's professional profile on LinkedIn. View Alon Havivi's projects on CodePlex. View Alon Havivi's articels on Eggheadcafe. Follow Alon Havivi on Twitter Connect with Alon Havivi via Facebook View Alon Havivi's Blog Subscribe to Alon Havivi RSS Feed