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
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
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
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).
You can download the SharePoint Video Library Template here.
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.
Navigate Site Actions --> Create
In the Create page (_layouts/create.aspx) select Video Library
No comments:
Post a Comment