Play video with HTML5 stored inside <liferay-home>/data/video folder.

[Raja Seth, módosítva 8 év-val korábban]

Hi All,

I have some stored videos inside <liferay-home>/data/video folder which I want to play with HTML5. I am facing problem to play it. Below are the steps I am following :

## Data Folder Path inside portal-ext.properties
yas.liferay.data.dir=${liferay.home}/data/repository

JSP Code :

<%
String repositoryDirPath = PropsUtil.get("yas.liferay.data.dir");
repositoryDirPath = repositoryDirPath + "/test.mp4";
%>

<img class="fullwidth" style="max-height:200px;max-width:138px;" src="<%=imagePreview %>" onclick="openVideoPopup('<%=name %>', '<%=video %>', '<%=imagePreview %>', '<%=repositoryDirPath %>');">

<aui:script>
function openVideoPopup(name, video, poster, videoPath) {
	
	//var videoPath = repositoryDirPath +'/'+ name;
	var videoDiv = '<video style="width: 670px; height: 290px;" controls poster="'+poster+'"><source src="'+videoPath+'"></video>';
	showVideoPopUp(name, videoDiv);
}

function showVideoPopUp(videoName, myVar) {
	AUI().use('aui-base','liferay-util-window','aui-io-plugin-deprecated',function(A){
		var popUpWindow=Liferay.Util.Window.getWindow({
			dialog: {
				bodyContent: myVar,
				centered: true,
				constrain2view: true,
				modal: true,
				resizable: false,
				width: 700,
				height: 375
			}
		}).plug(A.Plugin.IO, {
			autoLoad: false
		}).render();
		popUpWindow.show();
		popUpWindow.titleNode.html(imageName);
	});
}
</aui:script>

Please let me know if anyone have implemented such scenario.

Thanks & Regards,
Raja

[Raja Seth, módosítva 8 év-val korábban]

Also If I am taking the same path and opening in the browser, I am able to see video played.

[Juan Gonzalez, módosítva 8 év-val korábban]

First of all, that file path isn't accessible within a web server unless yo implement something for it.

Second, why don't you use built-in Liferay video player? You just have to enable Xuggler from Control Panel- > Server administration -> External services, and then just upload videos and play them in control panel or add them inside a web content.

[Raja Seth, módosítva 8 év-val korábban]

Hi Juan,

Thanks for your reply!!!

Can you please suggest what need to be done in this case so that the path is accessible. It's as per the client requirement they html5 default player. One quick question, can I use built-in Liferay video player anywhere I mean in portlet as you mentioned the two places in your comment :

play them in control panel or add them inside a web content.

Thanks & Regards,
Raja

[Juan Gonzalez, módosítva 8 év-val korábban]

Hi Raja,

Raja Seth:

Can you please suggest what need to be done in this case so that the path is accessible. It's as per the client requirement they html5 default player.

Yes, Liferay's built-in video player is compatible with HTML5 browsers (so, no need to flash plugin unless browser doesn't support HTML5, in that case it defaults to a built-in Flash video player).

Raja Seth:

One quick question, can I use built-in Liferay video player anywhere I mean in portlet as you mentioned the two places in your comment :

play them in control panel or add them inside a web content.

Exactly! Player will show up whenever a video file preview is generated (that would happen if you enable Xuggler from control panel and after uploading a video). This player will show from Documents & Media portlet, Image Gallery portlet or you can add in a web content (just be sure that preview was generated before) by clicking the "Play" simbol within editor toolbar.

More info here: https://dev.liferay.com/discover/portal/-/knowledge_base/6-2/automatic-previews-and-metadata and here https://dev.liferay.com/discover/portal/-/knowledge_base/6-2/features-of-liferays-wcm.

[Raja Seth, módosítva 8 év-val korábban]

Exactly! Player will show up whenever a video file preview is generated (that would happen if you enable Xuggler from control panel and after uploading a video). This player will show from Documents & Media portlet, Image Gallery portlet or you can add in a web content (just be sure that preview was generated before) by clicking the "Play" simbol within editor toolbar.

But what if I am storing my videos creating new folder "videos" inside tomcat/webapps. Can Liferay's built-in video player would be able to play videos stored inside tomcat/webapps.

Thanks & Regards,
Raja

[Juan Gonzalez, módosítva 8 év-val korábban]

In that case the built-in feature won't work. Anyway storing videos in that directory seems a little bit hacky, and in your case I would add all of those videos into document library to leverage those existing features.

[Raja Seth, módosítva 8 év-val korábban]

Juan Gonzalez:

In that case the built-in feature won't work. Anyway storing videos in that directory seems a little bit hacky, and in your case I would add all of those videos into document library to leverage those existing features.

But as I said the videos I am getting downloaded after the service call. In that case how could I achieve it? Can you please explain? I guess the flow would be like below :

• First, call the service to get videos list
• Then save it in document and media to some folder from where I can retrieve.
• Fetch and show the videos in my custom portlet.

Also I guess it will lead to performance issue as videos are around 1.5GB to 2GB in size.

[Juan Gonzalez, módosítva 8 év-val korábban]

Raja Seth:

But as I said the videos I am getting downloaded after the service call. In that case how could I achieve it? Can you please explain? I guess the flow would be like below :

• First, call the service to get videos list
• Then save it in document and media to some folder from where I can retrieve.
• Fetch and show the videos in my custom portlet.

I don't know what do you mean by "call the service" but I expect that would be a custom service for getting those documents....

Then, after calling that service, you can call Liferay DM API to store the videos (for example, this one if using 6.2 GA4: https://docs.liferay.com/portal/6.2/javadocs/index.html?com/liferay/portlet/documentlibrary/package-summary.html ).

Then, if Xuggler is enabled, video preview will be generated and you can use any of the built-in portlets, or use code like this in your custom one to get the preview video URL: https://github.com/liferay/liferay-portal/blob/6.2.3-ga4/portal-web/docroot/html/portlet/document_library/view_file_entry.jsp#L280-L307.

Then you can use code like this to use Liferay's built-in video player in your custom portlet: https://github.com/liferay/liferay-portal/blob/6.2.3-ga4/portal-web/docroot/html/portlet/document_library/player.jsp#L72-L93

Raja Seth:

Also I guess it will lead to performance issue as videos are around 1.5GB to 2GB in size.

Nope, that isn't true. Liferay has HTTP range support, so doesn't matter how big your files are, the stream should work fine. For video files, you should use any
File storage for your dl.store.impl property in portal-ext.properties.

[Raja Seth, módosítva 8 év-val korábban]

Thank you Juan!!!

[Raja Seth, módosítva 8 év-val korábban]

Can I store these videos inside webapps > downloads folder or is there any problem keeping inside this webapps location?

[Gurumurthy Godlaveeti, módosítva 8 év-val korábban]

Raja Seth:

JSP Code :

<%
String repositoryDirPath = PropsUtil.get("yas.liferay.data.dir");
repositoryDirPath = repositoryDirPath + "/test.mp4";
%>

<img class="fullwidth" style="max-height:200px;max-width:138px;" src="<%=imagePreview %>" onclick="openVideoPopup('<%=name %>', '<%=video %>', '<%=imagePreview %>', '<%=repositoryDirPath %>');">

Hi Seth,

You shouldn't place your files directly into data folder. You can use Document & Media portlet for uploading video or any kind of files. Once it's uploaded then you will get URL for it.

You can use that URL in your code for showing Video.

The second thing is,
D&M Service API calls helps you to get document element by passing Id or name so it comes as dynamic even in ur code also.

Thanks
Guru

[Raja Seth, módosítva 8 év-val korábban]

Hi Gurumurthy,

Thanks for your reply. If I see all the videos are around 2GB. I guess uploading videos in document & media is not a good practice as it will lead to performance issue. In my case I need to call the service and in very first time all the videos will be downloaded and stored at local place so that at the time of streaming it doesn't take time.

Regards,
Raja