Playing Audio in Flow Player in Liferay

Liferay is not only a portal but much more. For example Liferay is one of the best CMS (Content Management System) used today. Liferay CMS is comprised of Web content, Structure and template.

Many times, we are in need of incorporating video / audio in the portal. For example, If we build portal for any product based company, then its good to have some video like new products arrival, specification of products any updates etc on home page.


In this article, I will show how to incorporate video /audio through flow player in Liferay portal.
With Flow Player in Liferay, we can show

  • Video / Audio of any length.
  • Manipulate with controls ( like Play,Pause, Slider, Full screen etc)
  • Automatic buffer (true / false)
  • Auto play (true / false)
  • Playing multiple audio / video files by either building playlist or link of url of audio / video file.
  • And lot more…..
So let us jump into and see how to achieve this.
There are two approach, either we can play Audio / Video in Liferay plugin portlet or with the help of Liferay Web content. I will show both the ways.
I would recommend looking at index page ‘A Complete Liferay Guide‘ to browse all topics about liferay.

Flow player in Liferay

let’s first see how to achieve this by Liferay Plugin Portlet. For simplicity, I will use Liferay MVC portlet. Please refer my previous blog on How to create Liferay MVC Portlet and give project name show-video and eclipse will append -portlet so that the final project name will become show-video-portlet

Flow player required following artifacts to be included in project so that it can work properly.

  • jquery1.8.js (Java script :- JQuery library. Flow player required JQuery library)
  • flowplayer-3.2.6.min.js (java script:- JQuery plugin for Flow player)
  • flowplayer-3.2.15.swf (Flash file:- Main/Base flash file of Flow player)
  • flowplayer.audio-3.2.10.swf (Flash file:- Audio plugin of Flow player, required to play audio file)
  • flowplayer.controls-3.2.14.swf (Flash file:- Control plugin of Flow player. This requires to load all controls like play / pause button, slider, volume control etc)

In normal J2EE application, If we want to include javascript or css, we are putting it jsp like below code.

Explanation:-

  • First line, we are including javascript file (abc.js)
  • second line, we are including css file (xyz.css)
  • Both of these file (.js and .css) are located within web application context.
In our case, we also need to include few javascript file. In portlet, we still can import required javascript file and css file in jsp. But then we need to import this jsp in all other jsp file. Suppose we defined init.jsp file, where we have included all required javascript and css files. In our portlet, let say we have another file called view.jsp. If we want to refer these javascript files, we need to include init.jsp file to view.jsp file.
 
But wait….. there is another way to achieve this. We can make entry for all required javascript and css into liferay-portlet.xml file so that it will look like below snippet
Explanation:-
  • Observe the <header-portlet-javascript> entry I made under <portlet> element.
  • I have defined two such entry. One is for JQuery library and second is for JQuery plugin of Flow player.
  • Note that the path is relevant to root. So if I put these js file under /js folder, then it path should be /js/XXX.js
  • Similarly we can define the required css in <header-portlet-css> element. Since we don’t need any css for now, I haven’t define any one.
Next, place all the artifacts I mentioned above in the same folder (/js).The only thing, we need to make sure that above 3 swf files should be in same folder. 
 
Also we need to play mp3 file. So let us create folder audio under docroot and place the mp3 file in it.Till now the project structure will be look like below screenshot.
 
project-structure1
 
Our setup is done. So let us see how to place the Flow player in jsp. Add the code to view.jsp file so that it should look like below snippet.
Explanation:-
  • First, we have defined link with id as audio and href is the location where we have kept our mp3 file.
  • Next is the flow player configuration in javascript. flowplayer function has been called. The first parameter will be the id of the anchor where we want to place the flow player. So in this case, the first parameter is “audio” (which is the id of anchor link just defined above). Second parameter is the location where we placed the main swf file.
  • We have defined controls and audio elements under plugin to inform to Flow player that these are the plugin we have used.
  • In audio plugin, we have to give the path of the audio plugin’s swf file.
  • And at the end we have define various attribute of clip (audio or video) like auto play,auto-buffer and the last option is the provider, which is the same as audio plugin name we defined.
And its done. let us see how it will play it. build the portlet and deploy it over liferay page. It will be look like below screenshot.
flow player in Liferay play-file-on-portlet

You can observe, very nice player with all controls like play-pause, slider, volume control, time display are displayed. Also as soon as we place the portlet on Liferay page, it will start playing. This is because, we have defined autoPlay:true in clip section. There are many such options available to control the Flow player the way we want.

For more detail about configuration please refer site http://flash.flowplayer.org/plugins/streaming/audio.html


Feel free to ask question. I will try my best to get answer.


Note:- I have removed audio file under /audio folder to avoid large size of source. Please add appropriate mp3 file in /audio folder and give the respective path in view.jsp (in href of anchor link)


I would recommend looking at index page ‘A Complete Liferay Guide‘ to browse all topics about liferay.

Download Source
Download Source

Share This Post

4 Comments - Write a Comment

    1. Hi Sushree,

      As of now, I don’t have code for liferay 6.2 but it should work with little change. I will try to create it and let you know.

      Regards
      Nilang

      Reply

Post Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.