Article summary

Summary
Discusses how to develop an AEM 6 interactive video component. A special thank you to Lokesh Bs, a member of the AEM community, for contributing this AEM code. This code was one of the winning submissions in the 2014 AEM code contest.  
Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (beginner - intermediate)
Required Skills
JCR nodes, JavaScript, HTML
Tested On Adobe Experience Manager 6

Introduction

You can develop a custom video component for Adobe Experience Manager (AEM) 6 that supports the ability to display information at specific time intervals. For example, assume that a marketing team wants to highlight or emphasize a product feature along with their product video. That is, to display pointers or document links along with a marketing video. Given this requirement, you can develop an AEM video component that supports the following functionality:

  • Lets an author specify timeline point(s) of a video when content is displayed.
  • Lets an author specify the content what content to display.
The following illustration shows the custom interactive video component that is developed in this article. 
vidComponentTimeline

The interactive video component lets an AEM author select a video located in the AEM DAM, as shown in the following illustration. 

videoComponent1

The AEM author can also specify the time (in seconds) and the text to display.

videoComponent2

This AEM component uses the AEM APIs to create the component:

This article walks you though how to create an interactive video component that displays information at specific time intervals. The following illustration shows the project files used in this component. 

files
Section Description
A The client lib folder that contains JavaScript libraries used in this component. This client library is placed into the AEM JCR when you download the package as mentioned in this section.      
B The dialog for the interactive video component.  
C The JavaScript that defines application lofic for the interactive video component. 

This development article steps you through how to build this interactive video component. Perform these steps:

  1. Create a CQ application folder structure. 
  2. Create a template on which the page component is based.
  3. Create the page component based on the template.
  4. Create the video component.
  5. Add a dialog to the video component. 
  6. Create a CQ web page that uses the new video component.

Note:

In addition to working through this development article, download a package that represents the interactive video component. This package contains the AEM Client Library that this component is dependent upon. If you do not download and install the package, the interactive component will not work. To download the video component, click the link below.

Download

Create an AEM application folder structure  

Create an AEM application folder structure that contains templates, components, and pages by using CRXDE Lite.  

CQAppSetup

 

The following describes each application folder:

  • application name: contains all of the resources that an application uses. The resources can be templates, pages, components, and so on.
  • components: contains components that your application uses.
  • page: contains page components. A page component is a script such as a JSP file.
  • global: contains global components that your application uses.
  • template: contains templates on which you base page components.
  • src: contains source code that comprises an OSGi component (this development article does not create an OSGi bundle using this folder).
  • install: contains a compiled OSGi bundles container.

To create an application folder structure:

  1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite.
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter video.
  5. Repeat steps 1-4 for each folder specified in the previous illustration.
  6. Click the Save All button.

Note:

You have to click the Save All button when working in CRXDE Lite for the changes to be made.  

Create a template 

You can create a template by using CRXDE Lite. A CQ template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click the template folder (within your application), select Create, Create Template.

4. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter templateVideo.
  • Title: The title that is assigned to the template.
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter video/components/page/templateVideo.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

5. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.

6. Click Next for Allowed Parents.

7. Select OK on Allowed Children.

Create the page component based on the template  

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as a CQ developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click /apps/list/components/page, then select Create, Create Component.

4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter templateVideo.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Type: foundation/components/page (in AEM 6, you specify this value for page components. In previous versions of AEM, this was not required.)

5. Select Next for Advanced Component Settings and Allowed Parents.

6. Select OK on Allowed Children.

7. Open the templateVideo.jsp located at: /apps/video/components/page/templateVideo/templateVideo.jsp.

8. Enter the following HTML code.

<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
<h1>Here is where your AEM 6 interactive video component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Create an AEM 6 interactive video component

After you setup the AEM folder structure, create the AEM interactive video component. Perform these tasks using CRXDE Lite:

1. Right click on /apps/video/components and then select New, Component.

2. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter interactiveVideo2.
  • Title: The title that is assigned to the component. Enter interactiveVideo2.
  • Description: The description that is assigned to the template. Enter interactiveVideo2.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side kick where the component appears. Enter General. (The interactiveVideo2 component is located under the General heading in the Touch UI side rail. Also appears in General in the classic view sidekick.)
  • Allowed parents: Enter */*parsys.

3. Click Ok.

Add a dialog to the AEM Interactive Video component  

A dialog lets an author click on the component in the Touch UI (or Classic UI) view during design time and enter values that are used by the component. The component created in this development article lets the AEM author enter values that are used by the interactive video component, such as the video in the AEM DAM to display.

The interactive video dialog is based on JCR nodes displayed in the following illustration. 

dialogVideo


To add a dialog to the component, perform these tasks:

  1. Select /apps/video/components/interactiveVideo2, right click and select Create, Create Dialog.
  2. In the Title field, enter myvideo.
  3. Click Ok.
  4. Delete all nodes under /apps/video/components/interactiveVideo2/dialog.

Note:

This dialog is based on a classic dialog which works in Touch UI. To learn how to build a Touch UI dialog, see Creating your first Adobe Experience Manager Touch UI component.

Create the interactive video tab

Create the first (and only) tab in the dialog titled Interactive Video. The following illustration shows this tab.

dialog

To create the interactive video tab, perform these tasks:

1. Click on the following node: /apps/video/components/interactiveVideo2/dialog.

2. Right click dialog and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: cq:Widget

3. Select the /apps/video/components/interactiveVideo2/dialog/items node.

4. Right click items and select Create, Create Node.

5. Enter the following values:

  • Name: video
  • Type: cq:Widget
6. Add the following properties to the video node. 
Name Type Value Description
fieldLabel String Video Path the field label
fieldDescription String Select a path of a video provides a description
name String ./video specifies the name of the control
rootPath String /content/dam/geometrixx/Videos specifies the path where video are stored
xpath String pathfield specifies the xtype as a pathfield.

7. Click on the following node:/apps/video/components/interactiveVideo2/dialog/items.

8. Right click and select Create, Create Node.

9. Enter the following values:

  • Name: videocontent
  • type: cq:Widget
10. Add the following properties to this node. 
Name Type Value Description
fieldDescription String Supported maximum for 4 Timeline Points Specifies the description
fieldLabel String Video Content specifies the field label
name String ./videocontent specfies the name of the control
xtype String multimulticompositefield specifies a custom xtype. This is defined in the clientlibs/js/multicomp.js file. 

Note:

The xtype multimulticompositefield represents a custom xtype. For information about creating a custom xtype, see Creating your first Adobe Experience Manager custom xtype.

11. Click on the following node:/apps/video/components/interactiveVideo2/dialog/items/videocontent.

12. Right click and select Create, Create Node.

13. Enter the following values:

  • Name: fieldConfigs
  • type: cq:WidgetCollection

14. Click on the following node: /apps/video/components/interactiveVideo2/dialog/items/videocontent/fieldConfigs.

15. Right click and select Create, Create Node.

16. Enter the following values:

  • Name: timlinepoint
  • Type: cq:Widget

17. Add the following properties to this node. 

Name Type Value Description
fieldDescription String Supported maximum for 4 Timeline PointsEnter the Timeline Point in seconds (ex: 10 or 20 or 30) Specifies the description
fieldLabel String Timeline Point
specifies the field label
name String timelinepoint
specfies the name of the control
xtype String textfield specifies a custom xtype. 

18. Click on the following node: /apps/video/components/interactiveVideo2/dialog/items/videocontent/fieldConfigs.

19. Right click and select Create, Create Node.

20. Enter the following values:

  • Name: timelinecontent
  • Type:  cq:Widget

21. Add the following properties to this node. 

Name Type Value Description
fieldDescription String Enter the Timeline Point in seconds (ex: 10 or 20 or 30)
Specifies the description
fieldLabel String Timeline Content
specifies the field label
name String timelinecontent
specfies the name of the control
xtype String richtext specifies a custom xtype. 

22. Click on the following node: /apps/geometrixx/components/interactiveVideo/dialog/items/videocontent/fieldConfigs/timelinecontent.

23. Right click and select Create, Create Node.

24. Enter the following values:

  • Name: listeners
  • Type:  nt:unstructured

25. Add a property named destroy to this node. The value of the property is function() {this.el.dom={};} 

Define application logic in component  JSP

Define application logic for the component's JPS file located at: 

/apps/video/components/page/templateVideo/templateVideo.jsp

Add the following application logic to this JSP file. 

<%
%><%@include file="/libs/foundation/global.jsp"%>

<cq:includeClientLib categories="apps.interactive.video"/>

<%@ page import="com.day.cq.dam.api.Asset,
                   com.day.cq.wcm.api.WCMMode, 
                   com.day.cq.wcm.api.components.DropTarget,
                   com.day.cq.wcm.foundation.Placeholder,
				   org.apache.jackrabbit.commons.JcrUtils" %><%

    Asset asset = null;
    Resource assetRes = resourceResolver.getResource(properties.get("video", "abc"));
    if (assetRes != null) {
        asset = assetRes.adaptTo(Asset.class);
    }
    if (asset != null) {
        request.setAttribute("video_asset", asset.getPath());


	String videoPath = asset.getPath().toString();

	String timeline = "[";
    Node timeLineContentNode = currentNode.getNode("videocontent");    
    NodeIterator timeLineNodes = timeLineContentNode.getNodes();


	while (timeLineNodes.hasNext()) {
          Node item = timeLineNodes.nextNode();
          String timelinePoint = item.getProperty("timelinepoint").getString();
          timeline= timeline+timelinePoint;
            if(timeLineNodes.hasNext()){
              timeline= timeline+",";
            }
    }

	timeline=timeline+"]"; %>

<section id="main_slider">
    <section class="container-fluid container">
      <section class="row-fluid">
        <figure class="span4" id="contentDiv">
<%
	NodeIterator timeLineNodes1 = timeLineContentNode.getNodes();
	while (timeLineNodes1.hasNext()) {
        Node item = timeLineNodes1.nextNode();
        String timelineContent = item.getProperty("timelinecontent").getString();
        String timelinePoint = item.getProperty("timelinepoint").getString();
%>

            <div id="Slide<%= timelinePoint %>" class="slider_content">
                <span<%= timelineContent %></span>
            </div>

<%    
    }

%>
        </figure>
		<figure class="span4 scr-style">
			<video id="video" controls width="570" height="460" >
                <source src="<%= videoPath %>" type="video/mp4" />
				<source src="video/videogular.ogg" type="video/ogg" />
				<source src="video/videogular.webm" type="video/webm" />	
			</video>
        </figure>
      </section>
    </section>
  </section>
  



<script>
	var video;
	$(document).ready(function () {
		video = $.media('video');

		var timelne = <%=timeline%>;

		$.each(timelne, function( index, value ) {
          $( " #Slide"+timelne[0]+" " ).hide();
        });

		Updatetimeline(timelne);

        function Updatetimeline(timelne) {

            //var newtime = timelne;
            video = $.media('video');        
            video.createTimeline('first', {
            enabled: true,
            points: [
                {
                	time: timelne[0],
					fn: function (point, timeline) {
						$("#contentDiv").fadeIn(10000);
						$("#contentDiv").load( " #Slide"+timelne[0]+" " );

					}
				},{
					time: timelne[1],
					fn: function () {
						$("#contentDiv").load( " #Slide"+timelne[1]+" " );
					}
				},{
					time: timelne[2],
					fn: function () {
						$("#contentDiv").load( " #Slide"+timelne[2]+" " );
					}
				},{
					time: timelne[3],
					fn: function () {
						$("#contentDiv").load( " #Slide"+timelne[3]+" " );
					},
					fn_out: function () {
						$("#contentDiv").load( " #Slide"+timelne[3]+" " );
					}
				}
			]
        }).play();       }


	});

</script>

<%
    }else{
%>
<div> Add video content </div>

<%
    }
%>

Note:

The clientlibs named apps.interactive.video is defined in the package that you downloaded and installed. If you have not installed this package, see the instructions at the beginning of this article. 

Create an AEM web page that uses the interactiveVideo2  component 

The final task is to create a site in the AEM Touch UI view that contains a page that is based on  templateVideo (the template created earlier in this development article). This AEM page lets you select the interactiveVideo2 component that you just created from the AEM Touch UI side rail, as shown in the following illustration.

client1

Likewise, you can also use the interactiveVideo2 component in the AEM classic view. In this situation, you drag the component from the CQ sidekick, as shown in the following illustration. 

 

client2

To create an AEM web page that uses the interactive video component, perform these tasks:

  1. Go to the AEM welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select Sites.
  3. Select the + Icon in the web page. This create a new AEM page. 
  4. Select Create Page.
  5. Select templateVideo from the list of templates that appear. 
  6. Select Next.
  7. Specify the name of the page in the Title field.
  8. Select Create Page and open the new page. 
  9. Drag the IntreractiveVideo2 component from the AEM side rail into the page. Double click on the component. Enter values into the dialog.

Note:

If the AEM side panel is empty, populate the AEM side kick as described later in this section, when the AEM side kick is populated, the side rail is also populated with components. 

View the AEM page in Classic UI view and populate the AEM side kick

You can also view the page in AEM Classic UI view. To do so, select Classic View from the wheel icon in the AEM Page near the top, as shown in this illustration. 

ClassicView2

You will see the CQ sidekick and the interactiveVideo2 component under the General category. You can drag and drop the interactiveVideo2 component onto the AEM web page.

If the AEM sidekick is empty, you can populate it by clicking the Design button located at the bottom of the sidekick. Next click the Edit button that appears and select General from the list of categories that appear as shown here.

General

To view the sidekick with the General category, click the down arrow icon that appears on the sidekick. Drag the interactiveVideo2 component on the AEM web page. Double click on the component and you see the dialog that you created in this development article. 

See also

Congratulations, you have just created an AEM 6 interactive video component. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy