Liferay provide OOTB features for Preview of Documents (PDF,  Word, Image), Media (Audio and Video) in Document and Media Portlet.  The same is available after installing following components

• ImageMagick -  To convert into images for preview
• Ghostscript  - Dependency of ImageMagick
• Xuggler  - For Audio and Video.  Has to be included as jar file in case not available in DXP
• Open Office - This is required for Word document

Post installation , their path needs be added and enabled in Liferay ( Server Administration --> External Services).  If we need to develop this in custom portlet , here is the solution for the same.

Custom Portlet Solution:

1. Create Portlet and write custom code to check what type of file it is ( Doc or Video etc.)

For PDF and Images

boolean hasPDFImages = PDFProcessorUtil.hasImages(fileVersion);

boolean hasAudio = AudioProcessorUtil.hasAudio(fileVersion);

2. Generate preview URL for different file types

For Audio: 

previewFileURLs[0] = DLUtil.getPreviewURL(fileEntry, fileVersion, themeDisplay, previewQueryString)

3. Use preview URLs on JSP  ( used angular js in our case)

For Audio:

new A.Audio({

contentBox:"#<portlet:namespace />previewFileContent"+index,

fixedAttributes:{allowfullscreen:"true",wmode:"opaque"},

oggUrl:"http://localhost:8080/documents/20143/0/SampleAudio_0.4mb.mp3/844cc37b-5130-7097-feda-48b48eeea76a?version\x3d1.0\x26audioPreview\x3d1\x26type\x3dogg",

url:refFileURLStr.url

}).render();

});

 

Screenshots:

For PDF:

 

For Audio:

 

For Video: