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…..
Flow player in Liferay
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)
<link rel="stylesheet" href="/xyz.css" type="text/css">
- second line, we are including css file (xyz.css)
- Both of these file (.js and .css) are located within web application context.
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.0.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_0_0.dtd">
- 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.
<a id="audio" style="display:block;width:648px;height:30px;" href="/show-video-portlet/audio/track06.mp3"></a>
- First, we have defined link with id as audio and href is the location where we have kept our mp3 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.
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.