Forums

Home » Liferay Portal » English » 2. Using Liferay » General

Combination View Flat View Tree View
Threads [ Previous | Next ]
Alejandro Barrero
How do I add audio and video in Web Content?
July 2, 2009 7:29 AM
Answer

Alejandro Barrero

Rank: Junior Member

Posts: 77

Join Date: June 5, 2009

Recent Posts

How do I construct the template?

Thanks in advance for your help,

Alejandro Barrero
Auditya manikanta Vadrevu
RE: How do I add audio and video in Web Content?
July 2, 2009 9:38 PM
Answer

Auditya manikanta Vadrevu

Rank: Liferay Master

Posts: 621

Join Date: May 6, 2008

Recent Posts

hi Alejandro Barrero,

In webcontent display , provision is given to add flash movies. upload it first in document library(get the url) and add it in webcontent display through flash icon in editior.

Its code generated is,
<p><root> <dynamic-element instance-id="Nn3vgear" name="doc" type="document_library"> <dynamic-content> <embed menu="true" loop="true" play="true" src="/c/document_library/get_file?uuid=8dd1e926-ef0c-4ea3-8f9a-b83f8ea85aa9&amp;groupId=10128" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> </dynamic-content> </dynamic-element> </root></p>


I think we can play mp3,wav files also if we supply the right plugin.

With Regards,
V.Auditya
Alejandro Barrero
RE: How do I add audio and video in Web Content?
July 3, 2009 7:17 AM
Answer

Alejandro Barrero

Rank: Junior Member

Posts: 77

Join Date: June 5, 2009

Recent Posts

Thank you very much Auditya. What I want to do is to create a document with txt and video and audio contents. I have create a template (VM) using <embedded> and I browse for a wvm file in web content, but when I click on save on the web content the page displays with a message in red: web content is temporarily available. I don´t know how to make it work.
Jonas Yuan
RE: How do I add audio and video in Web Content?
July 3, 2009 7:36 AM
Answer

Jonas Yuan

Rank: Liferay Master

Posts: 993

Join Date: April 26, 2007

Recent Posts

Hi Alejandro,

Here are examples (you just put the following code as Source in the Web Content):

 1
 2<p><iframe height="380" frameborder="0" width="670" scrolling="no"
 3marginheight="0" marginwidth="0"
 4src="http://liferay.cignex.com:8080/cms_services/jsp/videolistPreview.jsp?&amp;uid=1018">
 5</iframe></p>
 6
 7<p><embed height="150" width="200" menu="true" loop="true"
 8play="true" src="http://liferay.cignex.com:8080/cms_services/swf/analogclock.swf"
 9pluginspage="http://www.macromedia.com/go/getflashplayer"
10type="application/x-shockwave-flash"></embed></p>


You can play with a lot of video, video list and vidoe queue at

Liferay 5.3.0 - SWF, Video, Game, Slideshow, Video Queue, Video List, Play-list, etc.

login as: jonas/jonas

Good luck!

- Jonas Yuan

Liferay Books
Liferay Portal 5.2/5.3 Systems Development
Liferay Portal 4.4/5.0 Enterprise Intranets
Alejandro Barrero
RE: How do I add audio and video in Web Content?
July 3, 2009 7:39 AM
Answer

Alejandro Barrero

Rank: Junior Member

Posts: 77

Join Date: June 5, 2009

Recent Posts

Thank you very much Jonas, but what exactly will be played?
Alejandro Barrero
RE: How do I add audio and video in Web Content?
July 6, 2009 5:36 AM
Answer

Alejandro Barrero

Rank: Junior Member

Posts: 77

Join Date: June 5, 2009

Recent Posts

Well Jonas, If I create by hand the HTML you propose it will work. But I wish that non techincal users could create the web content. I can create a structure and a template for them and they would have to browse for the files. However when I do this I browse fore a wvm file and click on Save, the page shows me in red "Wb content is temporarily unavailabel".
Jonas Yuan
RE: How do I add audio and video in Web Content?
July 16, 2009 6:34 AM
Answer

Jonas Yuan

Rank: Liferay Master

Posts: 993

Join Date: April 26, 2007

Recent Posts

Hi Alejandro Barrero,

The following are sample code for videos.

 1<html>
 2    <head>
 3        <title>Video Preview</title>
 4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5        <meta name="robots" content="noindex, nofollow">
 6        <script type="text/javascript" src="/cms_services/js/swfobject.js"></script>
 7    </head>
 8    <body id="videoplayer-container">
 9    <script type="text/javascript">   
10        var targetSWF = "/cms_services/street/video_240x180_standalone.swf";
11        var skinSWF = "/cms_services/street/sesame_video_control_skin.swf";
12       
13        var configURL ="/cms_services/services?action=player&type=VIDEO&uid=<%= request.getParameter("uid") %>";
14       
15        var so = new SWFObject("/cms_services/street/loader.swf", "videoplayer", "300", "300", "9.0.115.0", "#FFFFFF");
16        so.addParam("menu","false");
17        so.addParam("wmode","transparent");
18        so.addParam("allowScriptAccess","always");
19   
20        so.addVariable("targetSwf", escape(targetSWF));       
21        so.addVariable("configUrl", escape(configURL));
22        so.addVariable("skinUrl", escape(skinSWF));
23       
24        so.addVariable("jsShareMethod", "showShareDialog");
25        so.addVariable("jsFavoriteMethod", "flash_addToMyStreet");
26               
27        so.addParam("menu","false");
28        so.addParam("wmode", "transparent");
29        so.addParam("allowFullScreen","true");
30       
31        so.write("videoplayer-container");
32        window.document.videoplayer.focus();
33        RightClick.init("videoplayer","videoplayer-container");
34    </script>
35    </body>
36</html>


Hope it helps.

Thanks

Jonas Yuan

Liferay Books
Liferay Portal 5.2/5.3 Systems Development
Liferay Portal 4.4/5.0 Enterprise Intranets
Alejandro Barrero
RE: How do I add audio and video in Web Content?
July 7, 2009 10:35 AM
Answer

Alejandro Barrero

Rank: Junior Member

Posts: 77

Join Date: June 5, 2009

Recent Posts

Thank you Jonas, but how do I use it? How do I get cms_services/js/swfobject.js? What do I use instead of "/cms_services/street/video_240x180_standalone.swf" and "/cms_services/street/sesame_video_control_skin.swf"? How do I get "/cms_services/street/loader.swf"?
Jonas Yuan
RE: How do I add audio and video in Web Content?
July 16, 2009 6:33 AM
Answer

Jonas Yuan

Rank: Liferay Master

Posts: 993

Join Date: April 26, 2007

Recent Posts

Hi Alejandro Barrero,

You may find details on the chapter 6: Customizing the WYSIWYG Editor of the Book Liferay Portal 5.2/5.3 Systems Development.

Configure the WYSIWYG editor
Add templates and styles in FCKeditor
Insert images and links from different services
Insert content-rich flashes into web content
Use the WYSIWYG editor FCKeditor efficiently


Hope that it helps.

Thanks

Jonas Yuan
-------------------
Liferay Books
Liferay Portal 5.2/5.3 Systems Development
Liferay Portal 4.4/5.0 Enterprise Intranets
David Thompson
RE: How do I add audio and video in Web Content?
June 30, 2010 9:08 AM
Answer

David Thompson

Rank: New Member

Posts: 4

Join Date: June 15, 2010

Recent Posts

I see someone has written a plugin for CKEditor that adds a button to embed videos. The problem is that the installation instructions are for installing the plugin on a Drupal website. I am not technical enough to understand if the plugin would work in Liferay. And if so, could someone create instructions for installing the plugin on Liferay's CKEditor.

If some techie could research this and figure out how to implement the plugin in Liferay, I'm sure many people could use the solution.

References:

http://www.fluidbyte.net/index.php?view=embed-youtube-vimeo-etc-into-ckeditor
http://jesox.com/posts/how-add-youtube-vimeo-or-any-other-embed-content-ckeditor

Thanks for any help or insights that any of you might provide.

Dave Thompson
Jonas Yuan
RE: How do I add audio and video in Web Content?
July 1, 2010 10:20 AM
Answer

Jonas Yuan

Rank: Liferay Master

Posts: 993

Join Date: April 26, 2007

Recent Posts

Hi David, thanks.

Yes, you can customize CKEditor in Liferay portal and furthermore support smoothly Video, Video List, Slide-show, Game, Play List, etc.

For details, you may refer to the chapter 6: Customizing the WYSIWYG Editor of the Book Liferay Portal 5.2 Systems Development.


Jonas Yuan
-----------------
The Author of Liferay Books:
Liferay Portal 6 Enterprise Intranets
Liferay Portal 5.2 Systems Development
Liferay Portal Enterprise Intranets
Adolfo Benedetti
RE: How do I add audio and video in Web Content?
September 30, 2010 12:45 PM
Answer

Adolfo Benedetti

Rank: Junior Member

Posts: 45

Join Date: June 3, 2009

Recent Posts

Hi Everyone;

Another solution is using Structures and Templates wich will integrate the video/audio asset (in this example via JWPlayer )

The Template;

 1<div id="content">
 2
 3  <div id="header_content">
 4  </div>
 5
 6 <div id="video_title">
 7     <div class="h_section" id="t_g">
 8    <h2 class="section_title">
 9        <span> $video_title.getData()</span>
10         </h2>
11      </div>
12  </div>
13
14  <div id="video" align="center" >
15    #if ($video.getData()!= "")
16    <p id='player_multimedia_INSTANCE_$reserved-article-id.data'>Check your flash settings, please check www.getflash.com for more info </p>
17    <script type='text/javascript' src='/documents/10154/ddf0607a-332e-415b-a11a-be6a70d2b692'></script>
18    <script type='text/javascript'>
19      
20      var s1 = new SWFObject('/documents/10154/1b6908fb-6232-4ed3-b497-1fdcfe12968d','player','600','400','10');
21      ##to solve the string library bad characters
22      
23      function clean_str(cadena)
24      {
25      cadena = cadena.replace(/\?/g,"%3F");
26      cadena = cadena.replace(/\&/g,"%26");
27      cadena = cadena.replace(/=/g,"%3D");
28      return cadena ;
29      }
30      
31      ##Clean the source of the video path
32      var xxx = '$video.getData()';
33      var file_ok= clean_str(xxx); 
34      
35      ##check if there was an image on the structure
36      #if ($thumbnail.getData()!= "")
37      ##Clean the source of the thumbnail path
38      var yyy = '$thumbnail.getData()';
39      var img_ok= clean_str(yyy);
40      #else
41      ##Use an default thumbnail
42      var img_ok='path/to/default/logo';
43      #end
44
45      ##build the player
46      s1.addParam('allowfullscreen','true');
47      s1.addParam('allowscriptaccess','always');
48      s1.addParam('wmode','transparent');
49      s1.addVariable('file',file_ok);
50      s1.addVariable('image',img_ok);
51      s1.addVariable('backcolor','FFFFFF');
52      s1.write('player_multimedia_INSTANCE_$reserved-article-id.data');
53    </script>
54    #end
55  </div>
56
57 <div id="author"> by: <spam>$reserved-article-author-name.data</spam> </div>
58  <div id="date"> <spam>$reserved-article-display-date.data</spam> </div>
59  <div id="video_text"> $video_text.getData() </div>
60<div id="social"> 
61<div id="twitter">
62<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
63<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
64 </div>
65<div id="facebook">
66<iframe src="http://www.facebook.com/plugins/like.php?href=l$friendlyURL&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
67</div>
68</div>
69</div>


The structure;

 1<root>
 2  <dynamic-element name="thumbnail" type="text" index-type="not-searchable" repeatable="true">
 3  <meta-data>
 4            <entry name="displayAsTooltip"><![CDATA[true]]></entry>
 5            <entry name="required"><![CDATA[true]]></entry>
 6            <entry name="instructions"><![CDATA[]]></entry>
 7            <entry name="label"><![CDATA[Video's thumbnail]]></entry>
 8            <entry name="predefinedValue"><![CDATA[]]></entry>
 9        </meta-data>
10</dynamic-element>
11  <dynamic-element name="video_title" type="text" index-type="not-searchable" repeatable="true">
12  <meta-data>
13            <entry name="displayAsTooltip"><![CDATA[true]]></entry>
14            <entry name="required"><![CDATA[true]]></entry>
15            <entry name="instructions"><![CDATA[]]></entry>
16            <entry name="label"><![CDATA[video title]]></entry>
17            <entry name="predefinedValue"><![CDATA[]]></entry>
18        </meta-data>
19</dynamic-element>
20  <dynamic-element name="video" type="text" index-type="not-searchable" repeatable="true">
21  <meta-data>
22            <entry name="displayAsTooltip"><![CDATA[true]]></entry>
23            <entry name="required"><![CDATA[true]]></entry>
24            <entry name="instructions"><![CDATA[]]></entry>
25            <entry name="label"><![CDATA[video path]]></entry>
26            <entry name="predefinedValue"><![CDATA[]]></entry>
27        </meta-data>
28</dynamic-element>
29  <dynamic-element name="video_text" type="text_area" index-type="not-searchable" repeatable="false">
30  <meta-data>
31            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
32            <entry name="required"><![CDATA[false]]></entry>
33            <entry name="instructions"><![CDATA[]]></entry>
34            <entry name="label"><![CDATA[video_text]]></entry>
35            <entry name="predefinedValue"><![CDATA[]]></entry>
36        </meta-data>
37</dynamic-element>
38</root>


Cheers,

Adolfo
Jonas Yuan
RE: How do I add audio and video in Web Content?
October 20, 2010 11:39 AM
Answer

Jonas Yuan

Rank: Liferay Master

Posts: 993

Join Date: April 26, 2007

Recent Posts

Hi Adolfo,

Sorry to come back late.

Do you get issues fixed?

Of course, you can use any media player like JWPlayer.

Thanks

Jonas

==========
The Author of Liferay Books:
Liferay User Interface Development
Liferay Portal 6 Enterprise Intranets
Liferay Portal 5.2 Systems Development
Liferay Portal Enterprise Intranets
Adolfo Benedetti
RE: How do I add audio and video in Web Content?
October 21, 2010 7:32 AM
Answer

Adolfo Benedetti

Rank: Junior Member

Posts: 45

Join Date: June 3, 2009

Recent Posts

Hi Jonas,

In my last post you can find the details of our solution,

Cheers,
wynda tiara
RE: How do I add audio and video in Web Content?
December 24, 2010 12:10 AM
Answer

wynda tiara

Rank: New Member

Posts: 2

Join Date: December 23, 2010

Recent Posts

Hi Adolfo

i just try to using ur sample code to create Structures and Templates which will integrate the video asset via JWPlayer but i got error #2124.
error #2124 is Loaded file is an unknown type

my code :
.....
video.addVariable('enablejs', 'true');
video.addVariable('javascriptid', 'playlist');
video.addParam('allowfullscreen', 'true');
video.addVariable('width', '700');
video.addVariable('height', '400');
video.addVariable('displaywidth', '445');
video.addVariable('displayheight','355');
video.addVariable('file',file_ok);
video.addVariable('image',img_ok);
video.addVariable('overstretch','false');
video.addVariable('autostart','false');
video.addVariable('shuffle', 'false');
video.addVariable('repeat', 'list');
video.addVariable('thumbsinplaylist', 'true');
video.addVariable('backcolor', '0xFFFFFF');
video.addVariable('frontcolor', '0x404040');
video.addVariable('lightcolor', '0x808080');
video.addVariable('screencolor', '0x000000');
video.addVariable('playlistsize', '250');
video.addVariable('playlist','right');
video.write('player_multimedia_INSTANCE_$reserved-article-id.data');
......

thanks
regards

Wynda
Adolfo Benedetti
RE: How do I add audio and video in Web Content?
January 4, 2011 5:26 PM
Answer

Adolfo Benedetti

Rank: Junior Member

Posts: 45

Join Date: June 3, 2009

Recent Posts

which is the url that you are giving from the document library to access the video asset? jwplayer require the file extension
Hitoshi Ozawa
RE: How do I add audio and video in Web Content?
January 5, 2011 3:29 PM
Answer

Hitoshi Ozawa

Rank: Liferay Legend

Posts: 7949

Join Date: March 23, 2010

Recent Posts

CKEditor plugin seems interesting. Liferay seems to have customized some CKEditor codes and I have to merge them with the plugin codes.
wynda tiara
RE: How do I add audio and video in Web Content?
January 5, 2011 6:32 PM
Answer

wynda tiara

Rank: New Member

Posts: 2

Join Date: December 23, 2010

Recent Posts

Hi emoticon

I didn't save it in document library, its possible to play video if i only key-in the youtube URL?
for ex : http://www.youtube.com/watch?v=u84L_7v-D7A&feature=related

Thanks
Adolfo Benedetti
RE: How do I add audio and video in Web Content?
January 7, 2011 11:35 AM
Answer

Adolfo Benedetti

Rank: Junior Member

Posts: 45

Join Date: June 3, 2009

Recent Posts

wynda tiara:

for ex : http://www.youtube.com/watch?v=u84L_7v-D7A&feature=related


Into the JWplayer documentation

Says;

YouTube

The player includes native support for playing back Youtube videos (provider=youtube). Youtube playback is automatically enabled when the file option is assigned to the URL of a Youtube video (e.g. http://www.youtube.com/watch?v=WuQnd3d9IuA).

The player uses the official Youtube API for this functionality, so this is definitely not a hack. Youtube officially support playback of its content in third-party players like the JW Player.

The Youtube API is accessed through a bridge, the separate yt.swf file included in the player download.

Note: In order for Youtube videos to play, you must upload the yt.swf file to the same directory as the player.swf.


maybe you should avoid the "&feature=related" at the end of the url

Cheers
sandeep tripathi
RE: How do I add audio and video in Web Content?
December 13, 2011 1:51 AM
Answer

sandeep tripathi

Rank: Regular Member

Posts: 100

Join Date: October 19, 2011

Recent Posts

Hi Adolfo,
i had try using the structure and template given my you but i was not able to it right can u please help it out .
i need to create video gallery like where i can get the video upload from the document library

i had added in my portal -ext following line for supporting various video format
mime.types.content.disposition.inline=flv,pdf,swf,wmv
thanks in advance

Regards,
Sandeep
Juan Gonzalez
RE: How do I add audio and video in Web Content?
December 13, 2011 2:13 AM
Answer

Juan Gonzalez

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2947

Join Date: October 28, 2008

Recent Posts

sandeep tripathi:
Hi Adolfo,
i had try using the structure and template given my you but i was not able to it right can u please help it out .
i need to create video gallery like where i can get the video upload from the document library

i had added in my portal -ext following line for supporting various video format
mime.types.content.disposition.inline=flv,pdf,swf,wmv
thanks in advance

Regards,
Sandeep


Liferay 6.1 has a Media Gallery, where you will be able to play videos/audio.

Download latest sources (or nightly build) and check it.
sandeep tripathi
RE: How do I add audio and video in Web Content?
December 15, 2011 4:20 AM
Answer

sandeep tripathi

Rank: Regular Member

Posts: 100

Join Date: October 19, 2011

Recent Posts

Juan Gonzalez P:
sandeep tripathi:
Hi Adolfo,
i had try using the structure and template given my you but i was not able to it right can u please help it out .
i need to create video gallery like where i can get the video upload from the document library

i had added in my portal -ext following line for supporting various video format
mime.types.content.disposition.inline=flv,pdf,swf,wmv
thanks in advance

Regards,
Sandeep


Liferay 6.1 has a Media Gallery, where you will be able to play videos/audio.

Download latest sources (or nightly build) and check it.


hi Juan Gonzalez,

i had finally download the liferay 6.1 version from the site should i need to upgrade my liferay from 6.0.5 to 6.1 to run the code . should i create a hook for document library .



thanks in advance .

Regards
Sandeep
Juan Gonzalez
RE: How do I add audio and video in Web Content?
December 15, 2011 7:16 AM
Answer

Juan Gonzalez

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2947

Join Date: October 28, 2008

Recent Posts

sandeep tripathi:
Juan Gonzalez P:
sandeep tripathi:
Hi Adolfo,
i had try using the structure and template given my you but i was not able to it right can u please help it out .
i need to create video gallery like where i can get the video upload from the document library

i had added in my portal -ext following line for supporting various video format
mime.types.content.disposition.inline=flv,pdf,swf,wmv
thanks in advance

Regards,
Sandeep


Liferay 6.1 has a Media Gallery, where you will be able to play videos/audio.

Download latest sources (or nightly build) and check it.


hi Juan Gonzalez,

i had finally download the liferay 6.1 version from the site should i need to upgrade my liferay from 6.0.5 to 6.1 to run the code . should i create a hook for document library .



thanks in advance .

Regards
Sandeep


No, no need to install any plugin. You would only have to install Xuggler, enable it in portal-ext.properties or in Control Panel ->Portal config. Then add some environment variables before starting your server and you will get that.

More info: http://www.liferay.com/es/community/wiki/-/wiki/Main/Preview+Generation#section-Preview+Generation-Audio+and+Video+Previews
Alba García
RE: How do I add audio and video in Web Content?
February 26, 2012 11:49 AM
Answer

Alba García

Rank: Junior Member

Posts: 49

Join Date: February 10, 2011

Recent Posts

¿Podrias poner un ejemplo?

Yo necesito crear una estructura que tenga los siguientes campos:
  1. Titulo
  2. Resumen
  3. Documento (¿document_library?)
  4. Fecha de resolución del documento
  5. Feha de publicación del documento


para crear un tipo de contenido (Anuncio)

Y luego no se si voy a necesitar una plantilla para visualizar los distintos anuncios.
Además tengo una duda, ¿Debería usar un Web Content Display para Visualizarlos o un Asset Publisher? Es que me gustaría tener un paginador para cuando haya mas de 4 anuncios por ejemplo.


Un saludo y gracias!!
sandeep tripathi
RE: How do I add audio and video in Web Content?
December 15, 2011 2:42 AM
Answer

sandeep tripathi

Rank: Regular Member

Posts: 100

Join Date: October 19, 2011

Recent Posts

HI everyone,

i am trying create a video portlet using structure and template in web content .

i need a help in creating thumbnails of video so that i can show the thumbnail and when sum1 click on thumbnail respective video get loaded i had uploaded video in my document library and retrieving data from there .

the structure and template :

<root>
<dynamic-element name='video' type='document_library' index-type='' repeatable='false'></dynamic-element>
<dynamic-element name='width' type='text' index-type='' repeatable='false'></dynamic-element>
<dynamic-element name='height' type='text' index-type='' repeatable='false'></dynamic-element>
<dynamic-element name='autostart' type='text' index-type='' repeatable='false'></dynamic-element>
</root>

<script type="text/javascript" src="/html/js/flowplayer/flowplayer-3.2.6.min.js"></script>

<p><a href="$video.getData() " style="display:block;width:$width.getData()px;height:$height.getData()px;" id="player"> </a></p>

#if ($video.getData() != '')
<script type ="text/javascript">
flowplayer("player", "/html/js/flowplayer/flowplayer-3.2.7.swf", {
clip: {
autoPlay: $autostart.getData().isEmpty() ? false : $autostart.getData()
},
plugins: {
controls: {
autoHide: 'fullscreen'
}
}
});
</script>
#else
Please select the video from document library in web content edition menu.
#end
thanks in advance
Regards
Sandeep
Gabriel Leon Leyva
RE: How do I add audio and video in Web Content?
June 14, 2012 8:39 AM
Answer

Gabriel Leon Leyva

Rank: Regular Member

Posts: 243

Join Date: June 20, 2009

Recent Posts

Adolfo what are the steps to integrate JWPlay in the web content.


Thanks in advance