Flash WebPart to Play Flash Video in Sharepoint 2010

Hi Sharepoint Folks,

Sharepoint 2010 Provide Media webpart which support only .wmv file and Silverlight which is great if you have intranet site but i am working on Public facing site most of users browser have flash plugin so i develop a Webpart to play flash video.

I have used FlowPlayer and you can download it from here http://flowplayer.org/index.html and used Visual Studio 2010 for development.First download flowplayer Jquery,flowplayer swf  and flowplayer control swf files from link above.

Now Create a Sharepoint 2010 empty project and add Module from Items to upload all files for Player to /Style Library/Media Player/.The elements.xml file of Module should like this if you want to Upload files in Style Library like i did.Please note that you can also put all these file in other location.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="Styles" Url="Style Library/Media Player" RootWebOnly="TRUE" >
<File  Path="FlowPlayer Resources\flowplayer.controls-3.2.2.swf"  Url="flowplayer.controls-3.2.2.swf" Type="GhostableInLibrary" />
<File Path="FlowPlayer Resources\flowplayer-3.2.4.swf" Url="flowplayer-3.2.4.swf" Type="GhostableInLibrary" />
<File  Path="FlowPlayer Resources\flowplayer.commercial-3.2.4.swf"  Url="flowplayer.min-3.2.4.swf" Type="GhostableInLibrary" />
</Module>
</Elements>

Now add Other Sharepoint in Visual Studio called Webpart and Code (.cs) file of webpart add following Code

SPWeb web = null;
string _html = string.Empty;
StringBuilder _playerhtml = null;
private string _webUrl  = string.Empty;
private string _skin = string.Empty;
private string _pImg = string.Empty;</p>
[WebBrowsable(true)]
[Personalizable(PersonalizationScope.Shared)]
[WebDisplayName("Url Of File to Play")]
[Category("Configuration")]
[WebDescription("Example:/PublishingImages/filename.ext")]
public string VideoUrl {
get { return _webUrl; }
set { _webUrl = value; }
}
[WebBrowsable(true)]
[Personalizable(PersonalizationScope.Shared)]
[WebDisplayName("Url Of Preview Image File")]
[Category("Configuration")]
[WebDescription("Example:/Style Library/Media Player/FileName.ext")]
public string PreviewImag  {
get { return _pImg; }
set { _pImg = value; }
}
protected override void CreateChildControls()
{
  try {
           //get Current Web
          web = SPContext.Current.Site.RootWeb;
          string url = web.Url;
        _playerhtml = new StringBuilder();
          if (_webUrl != string.Empty) {
                   url += VideoUrl.ToString();
                  _playerhtml.AppendFormat("<a id='flowplayer' href='{0}'>",url);
            }
          else {
                _playerhtml.AppendFormat("<a id='flowplayer' href=''>");
           }
           if (_pImg != string.Empty) {
                     _playerhtml.AppendFormat("<img src='{0}' alt='Search engine friendly content' id='PreviewImg' />", PreviewImag.ToString());
           }
           else  {
                    _playerhtml.AppendFormat("<img src='{0}' alt='Search engine friendly content' id='PreviewImg' />", "/Style Library/Media Player/MediaWebPartPreview.png");
            }
            _playerhtml.Append("</a>");
            _playerhtml.Append("<script type='text/javascript' language='javascript'>");
            _playerhtml.Append("$(document).ready(function() {");
             _playerhtml.Append("flowplayer('flowplayer', {allowfullscreen: 'false',src:'/Style Library/Media Player/flowplayer.min-3.2.4.swf'},{ plugins: { ");
            _playerhtml.Append("controls:{url:'/Style Library/Media Player/flowplayer.controls-3.2.2.swf',fullscreen: false}");
            _playerhtml.Append("}});");
            _playerhtml.Append("});");
           _playerhtml.Append("</script>");
           Controls.Add(new LiteralControl(_playerhtml.ToString()));
}
catch (Exception ex)
{
     Controls.Add(new LiteralControl(String.Format("<p>Error: {0} : Description: {1}\n<br/>stack {2}</p>", ex.Source, ex.Message, ex.StackTrace)));
}

Please don’t forget to add reference to Flowplayer.min.js file in Master Page or in page Layout….
That’s It  Deploy it and if its doesn’t work then debug it.
Hope you get is working now add webpart in webpart zone and edit Webpart in Configuration sections Provide Url for Video and Preview Image.
wolah…..Flash Video in Sharepoint…
Take Look at this http://wwwtest.music.udel.edu/Pages/home.aspx to see outcome of above webpart
I haven’t tried this webpart in Sharepoint 2007 but i think it should work.
Thanks for Visiting Blog and comments,suggestions are welcome.

Ronak

Advertisements

2 thoughts on “Flash WebPart to Play Flash Video in Sharepoint 2010

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s