Tuesday, July 16, 2013

Create WebContent and Integrate Flow Player to Play Videos in Liferay

Most of the times we have a requirement from the client to show videos on the home page for marketing purpose or to promote the brands. At that time I looked into the internet for so many different players but I found the Flow Player as the Most efficient and easy to integrate it.

Note:- Download source code at the end of this blog.

Below are some of the Features of Flow Player which make him so much popular:-
  • Basic Features
    •   Play/Pause Controls
    •   FullScreen
    •   Playlist 
  • Advance Features
    •  Common Clipping ( for eg. :-  you can set the duration for all the files in the playlist to play for only 5 seconds )
    •  Clipping ( for eg. :-  you can set the duration for each and every individual file in the playlist)
    •  Advertising ( You can integrate Advertising in the Flowplayer same as you see in the youtube )
    •  Streaming ( Online streaming from live server )
There are so many different video formats are available on Internet. Some Particular format of Video required respective company's Player but some other formats are open and other players can play them.

As FlowPlayer runs on Flash Video Object, so it can virtually handle all format which are supported by flash.

Supported Video Format

Here I am going to show you the small demo about how to integrate Flow Player in Liferay and play videos with the help of it.

List of the necessary files required in order to integrate Flow Player with Liferay are as below:-

jquery1.8.js - Javascript file required for the Flow Player.
flowplayer-3.2.12.min.js - Javascript file required for the Flow Player.
flowplayer.ipad-3.2.12.min.js - Optional Javascript file required for the Flow Player to make Ipad Compatible.
flowplayer-3.2.16.swf - Flash File required in order to play Video or Audio.
flowplayer.controls-3.2.15.swf - Flash File which contains Controls of Flow Player like Volume Control, Slider, Play/Pause etc.

We can integrate the Flow player in two ways either we can use Web Content(Structure/template) or directly integrate in the Liferay Portlet.

Here we are going to see Flow Player integration with Web Content(Structure / Template)

There are three ways to include the Javascript and Flash file :-

1) If you have developed a theme for your site then put the Javascript and Flash files in theme and then include in Velocity(Template).

1. Folder Structure in theme

2) Put the JavaScript and Flash Files in the Document and Media.

2. Files in Document and Media

3) Most appropriate way, put the Javascript files in the Theme and Flash Files in Document and Media.

3.1 Files and Folder in Theme
3.2 Files in Document and Media





Here we are using the third approach.

After configuring the files, now we will start with creating the web-content.

Web Content is Divided in three Parts as below :-

1) Creating Structure.  2) Creating Template. 3) Creating Content.

4. Liferay 6.1 Web Content

1) Creating Structure


4.1 Creating Structure
After Clicking on the Add Structure button the below screen appears.

4.1.1 Structure GUI

Name and Description are the fields in order to name the Structure and also give appropriate description for that structure.

After Scrolling Down you will find XML Schema Definition section. Click on the Add Row button and go on adding as per below screenshot.

4.1.2 Structure XML Schema GUI
We have added three fields in XML Schema as per above screenshot.

VideoFile - Type as Text-Field (It will contain the path of the Video like Flv or mp4 file path).
SWFPlayer - Type as Document and Media ( It will have the flowplayer-3.2.16.swf file from the Document and Media).
SWFPlayerControl - Type as Document and Media ( It will have the flowplayer.controls-3.2.15.swf file from the Document and Media).

Now we are done with our Structure part.

2) Creating Template

4.2 Lifeay 6.2 Creating Template
After clicking on the Add Template button the below screen appears.

4.2.1 Template GUI
Name and Description are the fields in order to name the Template and also give appropriate description for that Template.
Cacheable is for caching the content.
Structure Selection is for selecting the structure that we have created
Language Type is for writting the Template code in different languages (VM,CSS,FTL,XSL)
Launch Editor will open the Screen in which you will be able to write the Template Code.

As you see in screenshot, the Editor with Default Code. Remove that Default Code and add below code in your editor.

Click on update button of Editor and now Save the Template.

Explanation of Template Code
  • $image-path will find the image path from theme.
  • 2nd and 3rd line is for importing the javascript file that we need to include in Flow Player. But one important thing is that as our Javascript File is in the JS Folder so we moved upto JavaScript Path from ImagePath accordingly.
  • Now we have defined link with id as player and href is the location where we will get video file path from the Web-Content Dynamically.
  • As we have written Flow Player configuration in ready function of the JavaScript. So When the page will be loaded and it will be ready then Javascript ready function will get called. In that our Flow Player function will be called.
  • First parameter in the flow player function is the id of the anchor where we want to place the flow player.
  • Second parameter in the flow player function is the parameter that contains the Main SWF File Path.
  • Third Parameter is the Plugins of the Flow Player. Here we used Play/Pause, Slider that contains inside the Plugins swf.
  • We can add more parameter if we want in the Flow Player functions.
3) Creating Web-Content

4.3 Create Web Content

There are two option either Basic Web Content or Flow Player :-

If you select Basic Web Content then you have to manually select Structure and Template for that web content.
But if you select FlowPlayer then it will automatically select Structure and Template of Flow Player.

After Clicking on it below screen appears.

4.3.1 GUI of Web Content

Title -  Will be appropriate title for the Web Content
Video file - It is the parameter that we defined in the Structure. Add the appropriate path of the Video File
SWF Player & SWF Control File that we need to select it from the Document and Media as we have specified in Structure.

After selecting the SWFPlayer and SWFPlayer Control appropriate SWF's. Click on the Publish Button.

Your Web Content is Created.

Now go any page in the site with Site Administrator or Administrator as a Role in liferay.
You will see the ADD Button on the DockBar.
Click on the ADD Button and select Web Content Display Portlet. It will appear in the page.
From the Web Content Display Portlet select Flow Player. It will appear as below :-

Flow Player integrated with Web Content


Congrats !! Now your job is done.

Download complete source code from here.

Hope it will be useful.

35 comments:

  1. Great post Amit, with in detail description of each line !!!
    Awesome !!!

    ReplyDelete
    Replies
    1. I am FRED and i want quickly recommend DR NCUBE for a Job well done by
      curing me from the genital herpes disease that have be giving me sleepless night. if you want to contact him, Simply do that via email drncube03@gmail.com or 
      call/whatsapp +2348155227532
      he also have #herbs for
      #hiv/aids
      #cancerdisease 
      #fibroid 
      #diabetes

      Delete
  2. Thanks Tejas for your feedback !!!

    ReplyDelete
  3. Hi Amit,
    i tryed on liferay-portal-6.1.1 but giving error when i try to save template code error is like(Please enter a valid script template. ).Plz help me

    ReplyDelete
    Replies
    1. I tried the same in liferay 6.1.1 CE and it was working fine.

      Can you please check it from your end whether you have selected the correct language-type?

      Delete
  4. Flowplayer is a good video player for the web. It has features like skinning, custom scripting and Javascript API and these features are suitable for Liferay developers and web developers to customize the look and behavior of the video player. We at Elegant MicroWeb find these features very helpful. There are detailed steps to integrate Flow Player so that you can display videos in Liferay web content. This is useful information for a web content developer.

    ReplyDelete
  5. Tks Amit, this was the kind of thing i was looking for.

    ReplyDelete
  6. Hi Amit, How we can restrict some users to add web content display portlet ?

    ReplyDelete
    Replies
    1. You can create your own role in which you don't allow them to add to page permission for the web content display portlet . I have not tried practically. But you can do some work around in the permissions.

      Delete
  7. Hey nice post, thanks for giving detail description about How to make a clipping path. Its very helpful for implementing images, according to requirement.

    ReplyDelete
  8. Hi Amit, Do you have a version of your flow player integration for Liferay 6.2?

    ReplyDelete
    Replies
    1. Sorry for coming late on it. I didn't get a chance to integrate Flow player with liferay 6.2

      Delete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Clipping path unique offer clipping path service at affordable price. Our expertise work on different techniques which make the image natural. professionals working on image editing, image masking, image manipulation and many more techniques.

    ReplyDelete
  11. Thanks for the post and sharing the blog. Valuable and excellent post, as share good stuff with good ideas and concepts.
    lots of great information and inspiration. I just would like to say thanks for your great efforts.
    I appreciate your excellent post.
    Thanks from,
    Clipping path service India

    ReplyDelete
  12. Thank you a lot for providing individuals with a very spectacular possibility to read critical reviews from this site.
    Devops online Training
    Online DevOps Certification Course - Gangboard

    ReplyDelete
  13. Very nice post here and thanks for it .I always like and such a super contents of these post.
    Excellent and very cool idea and great content of different kinds of the valuable information's.

    Java training in Bangalore



    ReplyDelete

  14. NICE for giving a chance to share ideas for your comuty i really thanks for that great post.
    travel trekking tips
    see the link Tent Camping 101 Exploring Smithriver

    ReplyDelete
  15. I am truly getting a charge out of perusing your elegantly composed articles. It would seem that you burn through a ton of energy and time on your blog. I have bookmarked it and I am anticipating perusing new articles. Keep doing awesome. business analytics course in surat

    ReplyDelete
  16. Informative and helpful article. Thanks for sharing this.



    Clipping Path Photo Editing Service

    ReplyDelete
  17. Great survey. I'm sure you're getting a great response. data analytics course in mysore

    ReplyDelete
  18. This is very impressive. You just gave me an amazing idea for my web content.
    Clipping Path Service Provider Company

    ReplyDelete
  19. Wonderful content you got here. Teaches a lot about the language.

    Photography as a Passion

    ReplyDelete
  20. Day house place catch act free. End evidence sing thousand person various first.entertainment

    ReplyDelete

nRelate Posts Only