How do I add audio and video in Web Content?

[Alejandro Barrero，修改在14 年前。]

How do I construct the template?

Thanks in advance for your help,

Alejandro Barrero

[Auditya manikanta Vadrevu，修改在14 年前。]

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，修改在14 年前。]

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，修改在14 年前。]

Hi Alejandro,

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

<p><iframe height="380" frameborder="0" width="670" scrolling="no" marginheight="0" marginwidth="0" src="http://liferay.cignex.com:8080/cms_services/jsp/videolistPreview.jsp?&amp;uid=1018">
</iframe></p>

<p><embed height="150" width="200" menu="true" loop="true" play="true" src="http://liferay.cignex.com:8080/cms_services/swf/analogclock.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></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，修改在14 年前。]

Thank you very much Jonas, but what exactly will be played?

[Alejandro Barrero，修改在14 年前。]

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，修改在14 年前。]

Hi Alejandro Barrero,

The following are sample code for videos.

	
		<title>Video Preview</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="robots" content="noindex, nofollow">
		<script type="text/javascript" src="/cms_services/js/swfobject.js"></script>
	
	
	<script type="text/javascript">	
		var targetSWF = "/cms_services/street/video_240x180_standalone.swf";
		var skinSWF = "/cms_services/street/sesame_video_control_skin.swf";
		
		var configURL ="/cms_services/services?action=player&type=VIDEO&uid=<%= request.getParameter("uid") %>";
		
		var so = new SWFObject("/cms_services/street/loader.swf", "videoplayer", "300", "300", "9.0.115.0", "#FFFFFF");
		so.addParam("menu","false");
		so.addParam("wmode","transparent");
		so.addParam("allowScriptAccess","always");
	
		so.addVariable("targetSwf", escape(targetSWF));		
		so.addVariable("configUrl", escape(configURL));
		so.addVariable("skinUrl", escape(skinSWF));
		
		so.addVariable("jsShareMethod", "showShareDialog");
		so.addVariable("jsFavoriteMethod", "flash_addToMyStreet");
				
		so.addParam("menu","false");
		so.addParam("wmode", "transparent");
		so.addParam("allowFullScreen","true");
		
		so.write("videoplayer-container");
		window.document.videoplayer.focus();
		RightClick.init("videoplayer","videoplayer-container");
	</script>
	

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，修改在14 年前。]

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，修改在14 年前。]

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，修改在13 年前。]

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 X. Yuan，修改在13 年前。]

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 Enrique Benedetti，修改在13 年前。]

Hi Everyone;

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

The Template;

<div id="content">

  <div id="header_content">
  </div>

 <div id="video_title">
     <div class="h_section" id="t_g">
	<h2 class="section_title">
		<span> $video_title.getData()</span>
         </h2>
      </div>
  </div>

  <div id="video" align="center">
    #if ($video.getData()!= "")
    <p id="player_multimedia_INSTANCE_$reserved-article-id.data">Check your flash settings, please check www.getflash.com for more info </p>
    <script type="text/javascript" src="/documents/10154/ddf0607a-332e-415b-a11a-be6a70d2b692"></script>
    <script type="text/javascript">
      
      var s1 = new SWFObject('/documents/10154/1b6908fb-6232-4ed3-b497-1fdcfe12968d','player','600','400','10');
      ##to solve the string library bad characters
      
      function clean_str(cadena)
      {
      cadena = cadena.replace(/\?/g,"%3F");
      cadena = cadena.replace(/\&/g,"%26");
      cadena = cadena.replace(/=/g,"%3D");
      return cadena ;
      }
      
      ##Clean the source of the video path
      var xxx = '$video.getData()';
      var file_ok= clean_str(xxx);  
      
      ##check if there was an image on the structure
      #if ($thumbnail.getData()!= "")
      ##Clean the source of the thumbnail path
      var yyy = '$thumbnail.getData()';
      var img_ok= clean_str(yyy); 
      #else
      ##Use an default thumbnail
      var img_ok='path/to/default/logo';
      #end

      ##build the player
      s1.addParam('allowfullscreen','true');
      s1.addParam('allowscriptaccess','always');
      s1.addParam('wmode','transparent');
      s1.addVariable('file',file_ok);
      s1.addVariable('image',img_ok);
      s1.addVariable('backcolor','FFFFFF');
      s1.write('player_multimedia_INSTANCE_$reserved-article-id.data');
    </script>
    #end
  </div>

 <div id="author"> by: <spam>$reserved-article-author-name.data</spam> </div> 
  <div id="date"> <spam>$reserved-article-display-date.data</spam> </div> 
  <div id="video_text"> $video_text.getData() </div> 
<div id="social">  
<div id="twitter"> 
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
 </div> 
<div id="facebook">
<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>
</div>
</div>
</div>

The structure;

<root>
  <dynamic-element name="thumbnail" type="text" index-type="not-searchable" repeatable="true">
  <meta-data>
			<entry name="displayAsTooltip">true</entry>
			<entry name="required">true</entry>
			<entry name="instructions"></entry>
			<entry name="label">Video's thumbnail</entry>
			<entry name="predefinedValue"></entry>
		</meta-data>
</dynamic-element>
  <dynamic-element name="video_title" type="text" index-type="not-searchable" repeatable="true">
  <meta-data>
			<entry name="displayAsTooltip">true</entry>
			<entry name="required">true</entry>
			<entry name="instructions"></entry>
			<entry name="label">video title</entry>
			<entry name="predefinedValue"></entry>
		</meta-data>
</dynamic-element>
  <dynamic-element name="video" type="text" index-type="not-searchable" repeatable="true">
  <meta-data>
			<entry name="displayAsTooltip">true</entry>
			<entry name="required">true</entry>
			<entry name="instructions"></entry>
			<entry name="label">video path</entry>
			<entry name="predefinedValue"></entry>
		</meta-data>
</dynamic-element>
  <dynamic-element name="video_text" type="text_area" index-type="not-searchable" repeatable="false">
  <meta-data>
			<entry name="displayAsTooltip">false</entry>
			<entry name="required">false</entry>
			<entry name="instructions"></entry>
			<entry name="label">video_text</entry>
			<entry name="predefinedValue"></entry>
		</meta-data>
</dynamic-element>
</root>

Cheers,

Adolfo

[Jonas X. Yuan，修改在13 年前。]

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 Enrique Benedetti，修改在13 年前。]

Hi Jonas,

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

Cheers,

[wynda tiara，修改在13 年前。]

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 Enrique Benedetti，修改在13 年前。]

which is the url that you are giving from the document library to access the video asset? jwplayer require the file extension

[Hitoshi Ozawa，修改在13 年前。]

CKEditor plugin seems interesting. Liferay seems to have customized some CKEditor codes and I have to merge them with the plugin codes.

[Taruchit Goyal，修改在5 年前。]

Hello Hitoshi,

 

I tried using Xuggler plugin which supported audio and video files, but had certain drawbacks.

I found a pluguin which supports CKEditor and video & audio files: 

https://ckeditor.com/cke4/addon/html5video

Please suggest how it can be used in existing setup of Liferay to add new functionality while creating a web content.

 

Thanking you in anticipation.

 

Regards

Taruchit Goyal

[Juan Gonzalez，修改在5 年前。]

Taruchit Goyal:

Hello Hitoshi,

 

I tried using Xuggler plugin which supported audio and video files, but had certain drawbacks.

I found a pluguin which supports CKEditor and video & audio files: 

https://ckeditor.com/cke4/addon/html5video

Please suggest how it can be used in existing setup of Liferay to add new functionality while creating a web content.

 

Thanking you in anticipation.

 

Regards

Taruchit Goyal

I think you are missing some important points around Xuggler features vs. some available CK editor plugins.

Xuggler feature in Liferay does process video files in order to enable HTML5 video seek, together with other important features for mobile devices (Iphone and Android).

I don't think any of these can be achieved by using any of the CK editor plugins.

[wynda tiara，修改在13 年前。]

Hi

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 Enrique Benedetti，修改在13 年前。]

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，修改在12 年前。]

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 P，修改在12 年前。]

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，修改在12 年前。]

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 P，修改在12 年前。]

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，修改在12 年前。]

¿Podrias poner un ejemplo?

Yo necesito crear una estructura que tenga los siguientes campos:

• Titulo
• Resumen
• Documento (¿document_library?)
• Fecha de resolución del documento
• 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!!

[Taruchit Goyal，修改在5 年前。]

Hello Juan,

 

Thank you for reply. 

When I used Xuggler plugin, following 2 drawbacks were faced: -

1. There was no explicit button visible for resizing the video. When we double click on the video, then we get the option for resizing the video. This does not seem to be a feasible solution for general end user.

2. The videos are by default set as left aligned. No option to set them as center or right aligned were found.

 

Thus, can you suggest some way to overcome these drawbacks and serve the end user.

 

Regards

Taruchit Goyal

[sandeep tripathi，修改在12 年前。]

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，修改在11 年前。]

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


Thanks in advance

[Taruchit Goyal，修改在5 年前。]

Hello Adolfo,

 

I have Liferay 7.1, and when I tried using the code given by you to create the structure, it gives a warning in orange text: "You cannot remove default attributes".

The code was not getting saved in structure.

 

Please suggest the modifications required to use the same.

 

Regards

Taruchit Goyal

[Taruchit Goyal，修改在5 年前。]

Hi Jonas,

Can we do the same in Community Edition? Please share some details.

Thanks
Taruchit

[Taruchit Goyal，修改在5 年前。]

I tried to access both the sites stated above for the reference; but none of them got loaded and returned error 404 not found.
Please help by providing the new URLs for understanding the same.