Interactive Videos
- Topics:
- Interactive Videos,Video
CREATED FOR:
- User
CAUTIONYou can easily create interactive videos that drive conversion directly from the video. Customer engagement with the video takes place in a panel alongside the video player where related service, information, or product thumbnails are scrolled into view based on what is featured in the video. Customers can tap the thumbnail and be linked directly to the service, or add the item to a shopping cart for immediate purchase, or be linked to a web page for more information.
When the video ends, a visual summary of all offerings is displayed to drive a call to action. Customers have another opportunity to tap the item they want. Actionable and specific experiences such as these increase customer engagement and conversions.
See also Interactive Images.
Interactive video in action
To see an interactive, shoppable video in action, click Live Demos, scroll to the Shoppable Media heading on the page, then click the shoppable video.
-
During playback, as products are used in the video, the identical product appears on the right as a thumbnail image.
-
Click the thumbnail if you want to pause the video and open the product’s Quickview. For example, click the KitchenAid thumbnail image in the video to experience a 360-degree spin view of the mixer, or zoom in to see mixer details.
NOTEWatch how interactive videos are created
Play a walkthrough on how interactive videos are created . (7 minutes 30 seconds) Although the video walkthrough is branded with Assets on Demand, the principles and steps still apply to Interactive Video in Adobe Experience Manager Assets.
Adobe Customer Success Webinar
The “Using Interactive Video, Link Sharing, and YouTube sharing in Experience Manager Assets” webinar teaches you how to use interactive video and other features to tie conversion driven events into your video marketing content.
Quick Start: Interactive Videos
The following step-by-step workflow description is designed to help you get up and running quickly with interactive videos in Dynamic Media.
Look for the Example heading within some of the Quick Start tasks. It contains a brief tutorial that is based on this starting demo web page that does not have interactivity added to it yet:
The Examples help to illustrate the steps of integrating interactive videos on your own website.
When you finish the tutorial in the last Example section, the final demo web page with the fully integrated interactive video looks like the following:
Interactive video workflow:
-
(Optional) Identifying Quickview variables - Start by identifying dynamic variables used by your existing Quickview implementation. You use the variables to map product thumbnails to their corresponding product Quickview when you create your interactive video. See (Optional) Identifying Quickview variables.
This step is only required if all the following are true:
- You want to add interactivity to your video by triggering to Quickviews.
- Your implementation of Experience Manager does not use an eCommerce integration framework for pulling product data into Experience Manager from any eCommerce solution such as IBM® WebSphere® Commerce, Elastic Path, hybris, or Intershop. See eCommerce concepts in Experience Manager Assets.
-
(Optional) Creating an Interactive Video viewer preset - Customize the appearance and behavior of various components that make up the player such as the video scrubber and the interactive thumbnails.
Creating your own Interactive Video viewer preset is not required if you intend to use the out-of-the-box Interactive Video viewer presets
Shoppable_Video_LightorShoppable_Video_Darkinstead.
See Creating a New Viewer Preset (optional) and Special considerations for creating an Interactive Viewer preset. -
Uploading a video and its associated image assets - Upload a video and associated images that you want to make interactive.
-
Adding interactivity to your video - Add one or more time segments to the video. Then, associate image thumbnails within those time segments. Assign each image thumbnail to an action such as a hyperlink, a Quickview, or an Experience Fragment.
(The URL-based method of linking is not possible if your interactive content has links with relative URLs, particularly links to Experience Manager Sites pages.)
Finish by publishing the interactive video assets. Publishing creates the embed code or URL that you eventually copy and apply to your website landing page. See Adding interactivity to your video.
See Publishing Assets.
-
Adding an interactive video to your website or to your website in Experience Manager
If you use Experience Manager Sites, or Experience Manager eCommerce, or both, you can add the interactive video directly to a web page in Experience Manager by dragging the Interactive Media component onto the page. See Adding Dynamic Media Assets to Pages.
Use the embed code or URL to integrate your interactive video with your website experiences. See Integrating an interactive video with your website.
If you are using a third-party WCM (Web Content Manager), you must integrate the new interactive video with the existing Quickview implementation that is used on your website. See Integrating an interactive video with an existing Quickview.
(Optional) Identifying Quickview variables
NOTE- You want to add interactivity to your video by triggering to Quickviews.
- Your implementation of Experience Manager does not use an eCommerce integration framework for pulling product data into Experience Manager from any eCommerce solution such as IBM® WebSphere® Commerce, Elastic Path, hybris, or Intershop. See eCommerce concepts in Experience Manager Assets.
Start by identifying dynamic variables used by your existing Quickview implementation so that you can map product thumbnails to their corresponding product Quickview during the interactive video creation process.
When you add time segments to a video, you assign a SKU (Stock Keeping Unit) and any additional variables to each thumbnail you add to a segment. Such variables are used later to display the right Quickview product.
It is important to properly identify what variables are required to uniquely trigger a product Quickview.
Sometimes it may be enough to consult with IT specialists responsible for your existing Quickview implementation. They are likely to know what minimum set of data is necessary to identify Quickview in the system. However, it is possible to simply analyze the existing behavior of the front-end code.
Most Quickview implementations use the following paradigm:
- User activates a user interface element on the website. For example, clicking a Quickview button.
- The website sends an Ajax request to the backend to load the Quickview data or content, if needed.
- The Quickview data is translated into the content in preparation for rendering on the web page.
- Finally, the front-end code visually renders such content on the screen.
The approach, therefore, is to visit different areas of your existing website where Quickview is implemented, trigger the Quickview, and capture the Ajax URL sent by the web page for loading the Quickview data or content.
Normally there is no need for you to use any specialized debugging tools. Modern web browsers feature web inspectors that do an adequate job. The following are a few examples of web browsers that include web inspectors:
-
To see all outgoing HTTP requests in Google Chrome, use keyboard shortcut
F12(Windows) orCommand + Options + I(Mac) to open the Developer Tools panel, and then click the Network tab. -
In Mozilla Firefox, you can either activate the Firebug plug-in by using keyboard shortcut
F12(Windows) orCommand + Options + I(Mac) and use its Net tab, or you can use the built-in Inspector tool and its Network tab. -
In Internet Explorer, activate the debugger tool by pressing
F12.
When network monitoring is turned on in the browser, trigger the Quickview on the page.
Now find the Quickview Ajax URL in the network log and copy the recorded URL for future analysis. Usually, when you trigger the Quickview there are numerous requests that are sent out to the server. Typically, the Quickview Ajax URL is one of the first in the list. It has either a complex query string portion or path, and its response MIME type is either text/html, text/xml, or text/javascript.
During this process, it is important to visit different areas of your website, with different product categories and types. The reason is that Quickview URLs may have parts that are common for a given website category, but change only if you visit a different area of the website.
In the simplest case, the only variable part in the Quickview URL is the product SKU. In this case, the product SKU value is the only data piece needed for adding thumbnails to a time segment in the interactive video in Experience Manager.
However, in complex cases, the Quickview URL has different varying elements in addition to the product SKU, such as category ID and color code. In such cases, every such element becomes a separate variable in the thumbnail data definition in Experience Manager.
Consider the following examples of Quickview URLs and their resulting thumbnail variables:
The recorded Quickview URLs include the following:
-
https://server/json?productId=866558&source=100 -
https://server/json?productId=1196184&source=100 -
https://server/json?productId=1081492&source=100 -
https://server/json?productId=1898294&source=100
The only variable part in the URL is the value of the productId= query string parameter, and it is clearly a SKU value. Therefore, the thumbnails only need SKU fields populated with values like 866558, 1196184, 1081492, 1898294.
The recorded Quickview URLs include the following:
-
https://server/product/6422350843 -
https://server/product/1607745002 -
https://server/product/0086724882
The variable part is in the last portion of the path, and it becomes the SKU value of Experience Manager thumbnails: 6422350843, 1607745002, 0086724882.
The recorded Quickview URLs include the following:
-
https://server/quickView/product/?category=1100004&prodId=305466 -
https://server/quickView/product/?category=1100004&prodId=310181 -
https://server/quickView/product/?category=1740148&prodId=308706
In this case, there are two varying parts in the URL. The SKU is stored in the prodId parameter and the category ID is stored in the category= parameter.
As such, the thumbnail definitions are pairs. That is, a SKU value and an extra variable called categoryId. The resulting pairs are the following:
- SKU is
305466andcategoryIdis1100004 - SKU is
310181andcategoryIdis1100004 - SKU is
308706andcategoryIdis1740148
Example
When the above approach is applied to the Example website, you have a web page with several product thumbnails, each having a SEE MORE button:
After you activate all product Quickviews available on the page, you get the following list of Quickview requests made to the backend:
- datafeed/candles-233396346.json
- datafeed/candles-233978050.json
- datafeed/candles-234024346.json
- datafeed/candles-234024356.json
- datafeed/candles-234024359.json
- datafeed/cushions-233939848.json
- datafeed/cushions-234019477.json
- datafeed/cushions-234019483.json
- datafeed/furniture-231747479.json
- datafeed/furniture-232625621.json
- datafeed/furniture-232625626.json
- datafeed/furniture-233939810.json
- datafeed/furniture-233939825.json
- datafeed/furniture-233939828.json
- datafeed/furniture-233939853.json
- datafeed/furniture-233940334.json
- datafeed/glassware-000064007.json
- datafeed/glassware-230722193.json
- datafeed/glassware-233916550.json
- datafeed/glassware-233916597.json
Looking at the server calls, you see that product-specific information is only present in the request path. You also notice that the query string is not used at all, and there are two distinct types of data pieces involved:
- The first type is candles, cushions, furniture, and glassware. You can call this “product category”.
- The second type is product code, such as 233916597. You can assume it is “product SKU”.
Given this information, the entire Quickview URL has the following pattern:
/datafeed/$categoryId$-$SKU$.json
Based on such analysis, you conclude that you can use the following two variables for the thumbnails: categoryId and SKU.
You are now ready to upload a video and its associated thumbnail assets.
(Optional) Creating an Interactive Video viewer preset
You can skip this task and continue to the next if you intend to use either of the default, out-of-the-box Interactive Video viewer preset types known as Shoppable_Video_dark or Shoppable_Video_light.
When a thumbnail is clicked in the authoring environment a preview of the Quickview dialog box appears.
You can optionally create your own custom Interactive Video viewer preset. You can determine, among other things, the styling of the video player, the interactive thumbnails, and the thumbnail grid view that appears at the end of the video.
An Interactive Video viewer preset properly renders the video and all timeline segments you have added. It also uses an example default Quickview when you click a product thumbnail in Preview mode so you can test its interactivity before publishing.
After you save the viewer preset, its state is automatically set to On in the Viewer Presets page. This state means that it is visible in the Dynamic Media component and whenever you preview a video with it. Be sure you also manually publish your new viewer preset.
See Creating a New Viewer Preset to create your own Interactive Video viewer preset.
Uploading a video and its associated thumbnail assets
If you have already uploaded your video and thumbnail assets, proceed to Adding interactivity to your video.
If you uploaded the wrong videos or images, or you want to delete uploaded videos or images that you no longer need, see Deleting Assets.
To upload a video and its associated thumbnail assets:
-
Upload the video and associated thumbnail assets to the folder or folders you want.
See Uploading assets.
See Uploading assets using FTP job scheduling.
Now add interactivity to your video.
Adding interactivity to your video
You add timeline segments to a video using the in-place visual editor on the Create Interactive Video page.
After you add timeline segments, you add thumbnail images within each segment. For each thumbnail that you add, you apply an action to it. For example, you can apply a Quickview to the thumbnail, or you can assign a hyperlink to it, or an Experience Fragment.
See Experience Fragments.
NOTEUndo and Redo options, near the upper-right corner of the page, are supported during your current creation/editing session.
After you save your interactive video, the video is immediately opened into Preview. From there, you can select an Interactive Video viewer preset and play the video to see an approximate representation of how it appears to customers.
To add interactivity to your video:
-
In the Assets view, navigate to the video that you uploaded and want to make interactive.
-
Do one of the following:
- Hover on the image, then tap Select (checkmark icon). On the toolbar, tap Edit.
- Hover on the image, then tap More actions (three dots icon) > Edit.
- Tap the image so you can open it in the Detail View page. On the toolbar, tap Edit.
-
On the Create Interactive Video page, do any one of the following:
-
Tap the Play button so you can play the video. When a particular product, service, or detail that you want to highlight comes into view, tap Add Segment on the toolbar. Repeat until you have reached the end of the video.
For each time segment that you add, assign one or more thumbnail images to it, and then link those thumbnails to Quickview product pages for customers to purchase or to web pages for more information.
-
Tap the Play button so you can play the video. When a particular product, service, or detail that you want to highlight comes into view, tap Pause. Tap Add Segment.
Continue playing and pausing the video at points along the timeline where you want to add a segment until you reach the end of the video.
-
-
(Optional) Drag the bar on the Timeline Scale Slider left to zoom in or right to zoom out. In this way, you control how much detail you see of the added segments.
Depending on the length of your video, the Segment Duration defaults to the following values:
If the video length is...The Segment Duration setting defaults to...3 minutes or more60 seconds2-3 minutes30 seconds1-2 minutes20 seconds30-60 seconds10 seconds30 seconds or less5 secondsThe video timeline uses as much screen real estate as what is made available to it. As such, when you resize the browser, the segments you added maintains their correct width.
To illustrate, the following three screenshots are using the same video. Notice that the width of each segment changes depending on the Timeline Scale setting.
Screenshot A
Screenshot A above shows you the default view of a 29-second product video. The Timeline Scale is set at the default of 5 seconds.
Screenshot B
In Screenshot B above, the Timeline Scale slider was dragged from the default of 5 seconds to 3 seconds. Notice that the individual Timeline Scale time stamps are now all set at 3-second intervals.
Screenshot C
In Screenshot C above, the Timeline Scale setting was moved to 8 seconds. Notice how the segments that contain product thumbnails have shrunk. Zooming out in this manner is useful if you have a long video and you want to be able to see an overview of more segments that would normally fit in the width of the page.
-
(Optional) Do any of the following:
-
To adjust a segment’s start time and end time.
Select a segment, then drag the leading or trailing blue oval to adjust the start or end time, respectively. The video frame displayed moves to the appropriate time in the video, based on your adjustments. The movement of the timeline segment is restricted based on any adjacent segments in the timeline. The minimum allowed segment time is one second.
Use the following navigation shortcuts to quickly check and fine-tune your video segments:
- Tap the leading blue oval if you want to seek the video directly to the beginning of that segment.
- Tap the trailing blue oval if you want to seek the video directly to the end of that segment.
- Tap the entire segment if you want to return video playback to the start of that segment
Repositioning the ending of a timeline segment
-
To delete a segment
Select the last segment that is on the timeline, then on the toolbar, tap Delete Segment. If two or more segments are selected, the Delete Segment feature is disabled.
You can only delete the last segment. For example, if you wanted to delete all the segments on the timeline, you must always select the last one, then tap Delete Segment.
-
-
Select a time segment to which you want to associate one or more thumbnail images.
-
To the right of the video, tap the Content tab.
-
Under the Content tab, tap Select Assets, then browse and select all the image assets that you want to use with your video. The selected assets are added to the Asset Selector panel in the Content tab.
-
In the asset selector below the Content tab, do any of the following:
To associate a thumbnail to the selected timeline segmentTap the image in the asset selector panel on the right.
You can add as many thumbnails as you want to a timeline segment. For each image you select, a check mark appears over the image in the asset selector.
To remove a thumbnail from the selected timeline segmentDo any of the following:
- In the asset selector panel, tap an image with a check mark to deselect it. The image asset is removed from the timeline segment.
- In the selected timeline segment, tap an image, then on the toolbar, tap Delete Product.
Tapping an image in the asset selector panel adds it to the selected timeline segment.
-
Select a single thumbnail image within one of the timeline segments, then tap the Actions tab.
-
Do any of the following:
<
To associate the selected thumbnail image with a QuickviewUnder Action Type, tap Quickview.
If you are an Experience Manager Sites and Ecommerce customer:
- Notice that the SKU Value text field is pre-populated with the selected product's SKU (Stock Keeping Unit), which is a unique identifier for each distinct product or service that you offer. This field is populated automatically when the image is associated with a product in Experience Manager Commerce.
- If the pre-populated SKU is incorrect, tap or click the Product Picker icon (magnifying glass) to open the Select Product page. Tap or click the product you want to use, then tap the check mark in the upper-right corner of the page so you can return to the Interactive Video Editor.
If you are not an Experience Manager Sites or Ecommerce customer
- See Identifying hotspot variables. You must define these variables.
- By default, this SKU field uses the image asset's filename without the extension. If you follow a standard naming convention for your files based on SKU, the files typically do not require any additional edits.
- Otherwise, edit the default value and enter the correct SKU value. In the SKU Value text field, type the product's SKU (Stock Keeping Unit), which is a unique identifier for each distinct product or service that you offer. The entered SKU value automatically populates the variable portion of the Quickview template so that the system knows to associate the tapped image with a particular SKU's Quickview.
(Optional) If there are other variables within the Quickview that you must use to further identify a product, tap Add Generic Variable. In the text field, specify an extra variable. For example,
category=Womensis an added variable.To associate the selected thumbnail image with a hyperlinkUnder Action Type, tap Hyperlink, then do one of the following:
- If you are an Experience Manager Sites customer, tap the Site Selector icon (folder) to navigate to a webpage. The URL-based method of linking is not possible if your interactive content has links with relative URLs, particularly links to Experience Manager Sites pages.
- If you are a standalone Dynamic Media customer, in the HREF text field, specify the full URL path to a linked web page.
Be sure you specify whether to open the link in a new browser tab or in the current tab.
To associate the selected thumbnail image with an Experience FragmentUnder Action Type, tap Experience Fragment, then do the following:
- If you are an Experience Manager Sites customer, tap or click the Search icon (magnifying glass) to open the Experience Fragment page. Tap or click the Experience Fragment you want to use, then tap Select in the upper-right corner of the page so you can return to the Actions panel on the previous page.
See Experience Fragments.
- Specify the width and height of the Experience Fragment as it appears on the video.
Note: The social media sharing tools in Interactive Video are not supported when you embed the viewer in an Experience Fragment. To work around this issue, you can use or create viewer presets that do not have social media sharing tools. Such viewer presets let you successfully embed it in Experience Fragments.
To edit an action already assigned to a thumbnail imageWithin a timeline segment, tap a thumbnail image that has a chain link to the right of its text label. The chain link indicates that an action is assigned to it. Tap the Actions tab so you can make your changes.To change the text label of a thumbnail imageBy default, the text label uses the thumbnail image’s
Titlemetadata field. IfTitleis not present, the thumbnail image's filename is used instead, but without the extension.To change the text label of a thumbnail image, under the Actions tab, directly below the image asset that is displayed, enter the desired text. See the screenshot below.
The new text label is used only by the video player itself and the thumbnail text that is displayed in the timeline segment. The label change does not affect the thumbnail image's Title metadata field nor its filename.
If you want to revert a change you have made,Near the upper-right corner of the page, tap Undo or Redo.
A new text label is added to the thumbnail image.
-
Do one of the following:
- Repeat steps 6-11 to add more thumbnail images to timeline segments in your video.
- Continue to the optional step 13.
-
(Optional) Do either of the following:
-
Merge Segment - You can combine two adjacent segments (with or without product thumbnails assigned to them) into one segment.
On the timeline, tap two or more contiguous segments that you want to merge into one. There are no blue oval drag handles on the two selected segments in the screenshot below.
Tap Merge Segment on the toolbar.
Merging two selected five-second segments into one ten-second segment.
-
Split Segment - You can divide a single segment into two equally timed segments. If there are product thumbnails already assigned to the segment, the thumbnails are combined into the left segment.
On the timeline, tap a segment you want to divide in half, then tap Split Segment on the toolbar.
Selecting two or more segments disables the Split Segment feature.
Splitting a selected ten-second segment into two segments of five seconds each.
-
-
Near the upper-right corner of the Create Interactive Video page, the name of the currently selected viewer preset used with the video is displayed. Tap the name if you want to select a different viewer preset.
For example, the
Shoppable_Video_lightviewer preset lets you play the video with a white display area next to the video. The display area is where the clickable thumbnail images are shown during playback. TheShoppable_Video_darkviewer preset lets you play the video with a black display area next to the video.If you created your own Interactive Video viewer preset, you also see it in the list of presets from which you can choose.
When you are finished, tap Save.
NOTEWhen you save your interactive video, an associated.vttfile is automatically saved with it. The.vttfile is saved to the_VTTfolder at the root of Assets. The file and folder is necessary for your interactive video to play correctly on your website. As such, do not move, edit, or delete the_VTTfolder or its contents. -
Publish the interactive video. Publishing creates the embed code or URL that you eventually copy and paste to your website experiences.
If you added interactivity with Quickviews, only use the embed code; if you added interactivity with hyperlinked webpages, you can also use the published URL. Note, however, that the URL-based method of linking is not possible if your interactive content has links with relative URLs, particularly links to Experience Manager Sites pages.
See Publishing assets.
NOTETo publish a shoppable video with Quickviews, be sure you also publish each of the video’s related image assets from your commerce area, separately.After you have added timeline segments and published the interactive video, you are ready to add it to your existing website landing page. See Integrating an interactive video with your website.
Publishing interactive video assets
See Publishing Assets for details on how to publish interactive video assets.
Integrating an interactive video with your website
After you have uploaded a video, added timeline segments to it, and published the interactive video, you are now ready to add it to your existing website.
If you are an Experience Manager Sites customer, you can add the interactive video by dragging the Interactive Media component to your page. See Adding Dynamic Media Assets to Pages.
If you are a standalone Experience Manager Assets customer, you can manually add the interactive video to your website as described in this section.
To integrate an interactive video with your website:
-
Copy the published interactive video’s embed code or URL.
See Embedding the Video or Image Viewer on a Web Page.
If you added interactivity with Quickviews, only use the embed code; if you added interactivity with hyperlinked webpages, you can also use the published URL. Note, however, that the URL-based method of linking is not possible if your interactive content has links with relative URLs, particularly links to Experience Manager Sites pages.
-
In the target’s web page code, identify where the static video is located.
-
Remove the static video and replace the code with the embed code or URL that you copied from Experience Manager Assets, as is.
The copied embed code is set for a responsive environment so it should automatically fit the area previously occupied by the static video.
NOTEExample
Using the demo website as an example:
Notice how it is standard video embed code:
<style type="text/css">
#s7video_div.s7videoviewer{
width:100%;
height:auto;
}
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/VideoViewer.js"></script>
<div id="s7video_div"></div>
<script type="text/javascript">
var s7videoviewer = new s7viewers.VideoViewer({
"containerId" : "s7video_div",
"params" : {
"serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
"contenturl" : "https://demos-pub.assetsadobe.com/",
"config" : "/etc/dam/presets/viewer/Video",
"config2": "/etc/dam/presets/analytics",
"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
"posterimage": "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4",
"asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
}).init();
</script>
Integration is as simple as removing the video embed code and replacing it with the interactive video embed code from Experience Manager. You can see the result at the following URL. While it shows an Interactive Video present on the page, it is not yet integrated with the existing Quickviews:
Integrating an interactive video with an existing Quickview
NOTEThe last step in this process is to integrate your interactive video with an existing Quickview implementation that is used on your web site. There is no solution to the integration that works for all cases. Every Quickview implementation is unique. As such, a specific approach is needed that involves the assistance of a front-end IT person.
The existing Quickview implementation normally represents a chain of inter-related actions that happen on the web page in the following order:
- A user triggers an element in the user interface of your website.
- The front-end code obtains a Quickview URL based on the user interface element that was triggered in step 1.
- The front-end code sends an AJAX request using the URL obtained in step 2.
- The backend logic returns the corresponding Quickview data or content back to the front-end code.
- The front-end code loads the Quickview data or content.
- Optionally, the front-end code converts the loaded Quickview data into an HTML representation.
- The front-end code displays a modal dialog box or panel and renders the HTML content on the screen for the end user.
These calls may not represent independent public API calls which can be called by the web page logic from an arbitrary step. Instead, it is a chained call where every next step is hidden in the last phase (callback) of the previous step.
At the same time that the interactive video is replacing step 1, and partially step 2, when a user clicks on a thumbnail inside the interactive video, such user interaction is handled by the viewer. The viewer returns an event to the web page that contains all the thumbnail data previously added to Experience Manager.
In such an event handler the front-end code does the following:
- Listens to an event emitted by the interactive video.
- Constructs a Quickview URL based on the thumbnail data.
- Triggers the process of loading the Quickview from the backend and rendering it on the screen for display.
In addition, the Interactive Video viewer supports full screen operation mode. The end user triggers Quickviews by clicking a thumbnail without leaving the full screen. To achieve this functionality, you alter the front-end code so that the Quickview modal dialog box is attached to the viewer’s container. Do not add document BODY or some other web page element that is not available when the viewer is in full-screen mode. The code that performs this job listens to one more viewer callback that is sent after the viewer loads on the page.
The embed code returned by Experience Manager already has a ready-to-use event handler in place. It is commented out as seen in the following highlighted code snippet:
<style type="text/css">
#s7interactivevideo_div.s7interactivevideoviewer{
width:100%;
height:auto;
}
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
"containerId" : "s7interactivevideo_div",
"params" : {
"serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
"contenturl" : "https://demos-pub.assetsadobe.com/",
"config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
"config2": "/etc/dam/presets/analytics",
"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
"interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
"VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
"asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
})
/* // Example of interactive video event for quickview.
s7interactivevideoviewer.setHandlers({
"quickViewActivate": function(inData) {
var sku=inData.sku; //SKU for product ID
//To pass other parameter from the hotspot, you need to add custom parameter during the hotspot setup as parameterName=value
loadQuickView(sku); //Replace this call with your quickview plugin
//Please refer to your quickviewer plugin for the quickview call
},
"initComplete":function() {
//--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
var popup = document.getElementById('quickview_div'); // get custom quickview container
popup.parentNode.removeChild(popup); // remove it from current DOM
var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(popup); //Attach custom quickview container to viewer
}
});
*/
s7interactivevideoviewer.init();
</script>
So, it is only necessary to uncomment the highlighted code snippet above and replace the dummy handlers body with code that is specific to the particular web page.
There are two default callback handlers present in the standard embed code: quickViewActivate and initComplete. The quickViewActivate handler triggers when a thumbnail is clicked in the viewer. Use it to integrate the viewer with Quickview activation logic. The initComplete handler triggers only one time when the viewer loads into the page. This handler is used to adjust the Quickview dialog box location in the web page DOM.
The process of constructing the Quickview URL is opposite to the process of identifying thumbnail variables covered earlier in this topic. Using the previously identified Quickview URL examples, you can see how the Quickview URL is constructed in each case:
s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku; }, });The last step to trigger the Quickview URL and activate the Quickview panel most likely requires the assistance of a front-end IT person from your IT department. They have the knowledge to know best how to accurately trigger the Quickview implementation from the proper step, having a ready-to-use Quickview URL.
You can see how these steps are applied to the demo website to fully integrate an interactive video with the Quickview code. Earlier in this topic, the structure of the Quickview URL was identified as the following:
/datafeed/$CategoryId$-$SKU$.json
It is easy to reconstruct this URL inside the quickViewActivate handler using categoryId and sku fields available in the inData object passed to the handler by way of the viewer’s code as in the following:
var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
The demo website is triggering the Quickview dialog box using a simple loadQuickView() function call. This function takes only one argument, which is the Quickview data URL. The last step is to integrate the interactive video is to add the following line of code to the quickViewActivate handler:
loadQuickView(quickViewUrl);
Finally, make sure that your Quickview dialog box is attached to the viewer’s container element. The default embed code provides sample steps to achieve this functionality. To obtain a reference to the viewer’s container element, you can use the following lines of code:
var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
Where inner_container is a reference to a DIV element managed by the viewer. You want the dialog box to be a child of that DIV.
The steps to actually locate the modal dialog box element and attach it to the above container are case-specific. Again, you can seek the help from your front-end developer who is familiar with your Quickview implementation that is needed.
For the sample website, the Quickview modal dialog box is implemented as a DIV with the quickview-modal ID attached directly to the document BODY. Therefore, the code to move that dialog box to the viewer’s container is as straightforward as the following:
var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(document.getElementById("quickview-modal"));
The complete source code is as follows:
<style type="text/css">
#s7interactivevideo_div.s7interactivevideoviewer{
width:100%;
height:auto;
}
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
"containerId" : "s7interactivevideo_div",
"params" : {
"serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
"contenturl" : "https://demos-pub.assetsadobe.com/",
"config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
"interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
"VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
"asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
})
// Example of interactive video event for quickview.
s7interactivevideoviewer.setHandlers({
"quickViewActivate": function(inData) {
var sku=inData.sku; //SKU for product ID
var categoryId=inData.categoryId; //categoryId
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
loadQuickView(quickViewUrl);
},
"initComplete":function() {
//--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(document.getElementById("quickview-modal"));
}
});
s7interactivevideoviewer.init();
</script>
The final demo website with the fully integrated interactive video looks like the following: