SharePoint Blog Site, CKS:EBE and Video Streaming

My last project was to create a few blogs in SharePoint 2007 platform for an USA based fashion house. Those blogs are different from the normal blogs – the main contents of the blogs are images and videos. In an average, each post consists of min 8 pictures, min 1 video and 1 or 2 single line of text.

To provide them cost effective, rapidly developed, stunning UI based blog sites, we have used mainly 3 components -

• SharePoint Blog Sites
• The Community Kit for SharePoint: Enhanced Blog Edition (V 2.0) and
• FlowPlayer free version (Free version available under the GPL license)

This post is mainly regarding – How to stream media files within SharePoint Blog sites created using CKS:EBE 2.0.

Before we start, do the following things:

1. Create a SharePoint Blog Site using CKS:EBE (for help: CKS:EBE 2.0 Final Release - CodePlex)
2. Download FlowPlayer free version (URL: FlowPlayer Download Section)
3. Download following files (These are also FlowPlayer installation files V 3.2.4)
   
   

Unzip what you have downloaded at 3rd point and rename the extracted contents as written below:

• Layouts_flowplayer.zip –> flowplayer –> Place this folder in your ‘Layouts’ folder present in the 12 hives (E.g.: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\flowplayer)
• UOJS.zip –> UOJS –> Place this folder in your ‘Layout\1033’ folder present in the 12 hives (E.g.: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\UOJS)
• 1033flowplayer.zip –> flowplayer –> Place this folder in your ‘Layout\1033’ folder present in the 12 hives (E.g.: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\flowplayer)

Now, to have your web pages play videos with Flowplayer, you must embed Flowplayer in those pages. So, open up the master page of your blog site using SP Designer and place the following lines of code inside the head block of the master page:

<SharePoint:ScriptLink id="js_jquery" language="javascript" name="UOJS/jquery-1.3.2.min.js" runat="server"/>   
    <SharePoint:ScriptLink id="js_flowplayer" language="javascript" name="flowplayer/flowplayer-3.2.4.min.js" runat="server"/>
     <script type="text/javascript">
        jQuery(document).ready(function() {           
            $('a[rel*=fp]').flowplayer('/_layouts/flowplayer/flowplayer-3.2.4.swf',  {
              clip: {
                 autoPlay: false,
                autoBuffering: false,
                bufferLength: 5
              }
            });
        })
    </script>

and save the master page.

Sample Screen Shot:

Now, store some media files in your blog sites ‘Media’ document library. In my case, I have created another folder named ‘Video’ in the ‘Media’ document library and have stored videos inside them:

Now, go to your blog site created using CKS:EBE and select the ‘Create Post’ option available under ‘Blog Admin’ section. In the ‘NewPost.aspx’ page, give title to your post, select the body and then select the ‘html’ editor button as shown below:

In the HTML editor, enter the text and the url of your media files in the following way:

Select OK and then Select Publish and go to your blog site and hit F5 and you are done. Here is your blog page streaming media files stored in your own document library :)

Cheers,
Avik