SharePoint Video Library Template Available For Download
By Alon Havivi
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.
Popularity (17230 Views)
Article Discussion: Available for Download: SharePoint Video Library Template
No replied
to Alon Havivi at Friday, October 15, 2010 5:11 AM
Hey bro, you would want to change
EmbeddedScript from webplayer to some guid so that one can include multiple videos on one page. Otherwise it will think all in one id "webplayer".
Great job with this control.
Gavin replied
to No at Friday, October 15, 2010 5:11 AM
I got the video to play but the sound is duplicated over the top of itself a few seconds afterwards. Any ideas on this???
Ken replied
to Gavin at Friday, October 15, 2010 5:11 AM
I experience the same problem - the sound is duplicating over itself. When I just "open" the same file from the site in a browser it plays fine. I'm sure there is somethign simple I'm missing but can't figure it out. Any clues would help
Jeremy replied
to Gavin at Friday, October 15, 2010 5:11 AM
I had the same problem, and found that leaving out the HTTP address and just using the uploaded filename corrected it
Scott replied
to Jeremy at Friday, October 15, 2010 5:11 AM
Same problem as stated above, except i am actually getting TWO videos playing in the pop-up window. I believe that would explain why some people are hearing two tracks of audio. It looks like for some reason they are playing on top of each other. It shows in the source view as well playing to versions of the video. Strange. Trying to find a solution now..
Wiktor replied
to Alon Havivi at Friday, October 15, 2010 5:11 AM
Hi,
any ideas why the video does not fill the entire player frame? It's squashed verticatly. The width is fine. I've set the width and hight correctly and when I go to full screen the video is fine. Also when I exit the full screen the video will continue to play correctly.
Thanks for any pointers.
Wiktor replied
to Wiktor at Friday, October 15, 2010 5:11 AM
I should have added that it only does that in IE8 :) Unfortunatelly that is the standard browser we use here so I cannot really tell people to use something different.
sammy mc replied
to Wiktor at Friday, October 15, 2010 5:11 AM
I have a media library which stores all short videos. I want to create a custom webpart which display 1 video and it can able to scroll to choose another! Please advice the best way! thank you!
Pig bbong replied
to Gavin at Friday, October 15, 2010 5:11 AM
i have the duplicated sound problem any idea on it?
and how to stop the autoplay function ?
Please help cause i feel this player is wat i wan but it still have a little bugs...
Pig bbong replied
to Alon Havivi at Friday, October 15, 2010 5:11 AM
i have the duplicated sound problem any idea on it?
and how to stop the autoplay function ?
Please help cause i feel this player is wat i wan but it still have a little bugs...
Dick replied
to Alon Havivi at Friday, October 15, 2010 5:11 AM
I got everyhting loaded, converted the video to FLV, click on the arrow, and the player just sits there with the arrow going around and around in a circle. The video never plays. What might be wrong here? Everyhting looks like it should but nothing plays.
Thank you for this app.
Jabez replied
to Alon Havivi at Friday, October 15, 2010 5:11 AM
Hi,
Thanks for the app.
Along with this I also need to the video file duration, I mean what is the length of the video file.
I have certain videos available in my document library, I need to know how I could get the duration / length of these video files.
Please let me know. Thanks in advance.
Joseph replied
to Jabez at Friday, October 15, 2010 5:11 AM
Hi,
thanks for app.
follow the installation instruction closely but can't find the app in the site feature.
can help?