oo

Creating Video Shortcut Providers

Available for Liferay DXP 7.4+

By default, Liferay’s external video shortcuts support YouTube, Vimeo, Facebook, and Twitch. However, you can extend this feature to support other video sources.

Follow these steps to create your own video shortcut provider:

  1. OSGI Component Annotation: Use the @Component annotation to declare the provider a DLVideoExternalShortcutProvider.class service within the OSGi framework.

  2. DLVideoExternalShortcutProvider: Implement the DLVideoExternalShortcutProvider interface.

  3. Override the Interface’s Method: Override the interface’s getDLVideoExternalShortcut() method. This method creates an instance of the DLVideoExternalShortcut interface and receives a URL String. Ensure your implementation does these things:

    • Checks if the received URL matches any defined URL patterns.
    • If the URL doesn’t match a pattern, the program should return null. Liferay checks other available providers in search of a match.
    • If the URL matches a pattern, parse the URL, fetch any extra information from the external source, and return a DLVideoExternalShortcut instance with the gathered information.
  4. Override DLVideoExternalShortcut Methods: Override the required methods for the DLVideoExternalShortcut instance returned by the getDLVideoExternalShortcut() method.

    • getURL(): retrieves the original video URL.
    • renderHTML(): embeds the video in the user interface. This typically renders an iframe but could also be an HTML video tag anything that renders the video for users.
  5. Override these optional methods:

    • getDescription(): Use this method to retrieve the original video’s description; its default value is null.
    • getThumbnailURL(): Use the this method to retrieve the video’s thumbnail; its default value is null.
    • getTitle(): Use this method to retrieve the original video’s title; its default value is null.

Below is a sample external video shortcut provider that demonstrates the minimum requirements for implementing your own. See existing providers for more complex examples.

Deploying the Sample Video Provider

Start a new Liferay instance by running

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.112-ga112

Sign in to Liferay at http://localhost:8080. Use the email address test@liferay.com and the password test. When prompted, change the password to learn.

Then, follow these steps:

  1. Download and unzip the example module.

    curl https://resources.learn.liferay.com/dxp/latest/en/content-authoring-and-management/documents-and-media/developer-guide/liferay-g9b6.zip -O
    
    unzip liferay-g9b6.zip
    
  2. Run the gradlew deploy command to build the JAR file and deploy it to your new Docker container:

    cd liferay-g9b6
    
    ./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)
    

    The JAR is generated in the build/libs folder (i.e., g9b6-impl/build/libs/com.acme.G9B6.impl-1.0.0).

  3. Confirm the provider was successfully deployed and started via the container console.

    Processing com.acme.G9B6.impl-1.0.0.jar
    STARTED com.acme.G9B6.impl-1.0.0 [1356]
    
  4. Verify the module is working by creating a new external video shortcut with a short Dailymotion URL (e.g., https://dai.ly/x7szh28).

    If successful, Liferay should recognize Dailymotion as a supported platform.

    Liferay should recognize Dailymotion as a supported platform

Code for the Sample Video Provider

@Component(service = DLVideoExternalShortcutProvider.class)
public class G9B6DLVideoExternalShortcutProvider
implements DLVideoExternalShortcutProvider {

@Override
public DLVideoExternalShortcut getDLVideoExternalShortcut(String url) {
	Matcher matcher = _pattern.matcher(url);

	if (!matcher.matches()) {
		return null;
	}

	return new DLVideoExternalShortcut() {

		@Override
		public String getURL() {
			return url;
		}

		@Override
		public String renderHTML(HttpServletRequest httpServletRequest) {
			String iframeSrc =
				"https://www.dailymotion.com/embed/video/" +
					matcher.group(1) + "?rel=0";

			return StringBundler.concat(
				"<iframe allow=\"autoplay; encrypted-media\" ",
				"allowfullscreen height=\"315\" frameborder=\"0\" ",
				"src=\"", iframeSrc, "\" width=\"560\"></iframe>");
		}

	};
}

private static final Pattern _pattern = Pattern.compile(
	"https?:\\/\\/(?:www\\.)?dai\\.ly\\/(\\S*)$");

}

OSGi Component Annotation

The provider is declared a component within the OSGi framework and identified as a DLVideoExternalShortcutProvider.class service.

DLVideoExternalShortcutProvider Implementation

The provider implements the DLVideoExternalShortcutProvider interface. This interface includes a single method, getDLVideoExternalShortcut, which returns a DLVideoExternalShortcut if a valid URL is received.

Override getDLVideoExternalShortcut

The provider overrides the interface’s getDLVideoExternalShortcut method, which contains all of the provider’s essential logic. It checks whether the URL matches the defined regex pattern. If no match is found, then it returns null, and Liferay proceeds to call other available providers in search of a match. If it does match, it returns a new DLVideoExternalShortcut object for embedding the video into a Liferay Page or asset.

Override DLVideoExternalShortcut’s Methods

When the provider returns a DLVideoExternalShortcut object, it overrides the object’s getURL() and renderHTML() methods. getURL() returns the URL entered by the user. renderHTML() receives a HttpServletRequest parameter and returns an iframe string to be embedded into a Liferay Page or asset. Consider the following example.

Since getDescription(), getThumbnailURL(), and getTitle() are not overridden, null is returned.