Using FlowPlayer with IBM Lotus Workplace WCM

FlowPlayer is one of the popular open source applications for playing Flash Videos (.flv files). Here’s a quick guide on how to set it up in IBM Lotus Workplace WCM for embedding and playing flash video files.

In preparation

Place the following files in the /jsp/html folder (a wcm.ear subfolder):

  • flowplayer.controls-3.1.1.swf
  • flowplayer-3.1.1.swf

Upload the following files into wcm as file resource components:

  • flowplayer-mini.js
  • The .flv video file

Creating the Authoring and Presentation Templates

Create an authoring template that allows the content contributor to enter a teaser for the video and upload the video file (.flv). In the authoring template create a component reference element called ‘file’. This is the name you will use in the presentation template to refer to the video file.

Create a presentation that displays the teaser and the video using FlowPlayer. The presentation template will have something like this:

In the header or at the top of the body, you should a snippet similar to this:

<script type=”text/javascript” src=”<Component name=”<library-name>/flowplayer-mini.js”/>”></script>
<script type=”text/javascript”><Component name=”<library-name>/encodevideourlampersands-js”/></script>

Further down in the body, add the elements to displays the teaser and the FlowPlayer and the video:

<h1><IDCmpnt context=”current” type=”content” field=”title”/></h1>
<p><a href=”<Element context=”current” type=”content” key=”file”/>” title=”” target=”” style=”display:block;width:350px;height:245px;” id=”player”></a></p>
<Element context=”current” type=”content” key=”teaser”/>

<!– call the js function to replace the ampersands here —>
flowplayer(“player”, “/wps/wcm/jsp/html/flowplayer-3.1.1.swf”, {clip : {autoPlay: false, autoBuffering: true} });

The flash video doesn’t seem to load? You need to replace the ampersands (created by wcm as url reference to the uploaded video file) with %26. Here’s a simple JavaScript function which will do that:

function encodeVideoURLAmpersands(ahrefID)
var theURL=document.getElementById(ahrefID).href;
var newURL=theURL.replace(/&/g,”%26″);

Save the above as an HTML component, and included it in the presentation (in the header section or at the top of the body) as follow:

<script type=”text/javascript”>
<Component name=”<library-name>/encodevideourlampersands-js”/>

Create the content page to display the video

Create a new content page using the authoring template just you’ve created for uploading .flv videos. Save the content page and preview it. FlowPlayer should load and buffer the video. Once it has completed buffering, click on the play button to play the video.



Leave a Reply

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

You are commenting using your 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